{% from "utils.html" import submit_button %}
{% extends "layout.html" %}
{% block title %}Billing{% endblock %}
{% block content %}
<div class='flex flex-wrap justify-around md:mt-16'>
  <div class='lg:basis-1/3'>
    <form method="GET" action="{{ base_path }}/billing">
      <div class='flex flex-wrap justify-between space-y-2 items-end'>
        <div class='flex flex-col'>
          <label class='mb-1' for="start">Start</label>
          <input class='border rounded p-2' name="start" type="text" required value="{{ start or '' }}"
            placeholder='MM/DD/YYYY'>
        </div>
        <div class='flex flex-col'>
          <label class='mb-1' for="end">End (inclusive)</label>
          <input class='border rounded p-2' name="end" type="text" value="{{ end or '' }}"
            placeholder='MM/DD/YYYY (optional)'>
        </div>
        <div class='h-1/2'>
          {{ submit_button('Submit') }}
        </div>
      </div>
    </form>
    <p class='text-zinc-500 text-balance py-8'>
      Start must be a date in the format MM/DD/YYYY. End is an optional date in the format
      MM/DD/YYYY. Leave End empty to include currently running batches. If End is not empty,
      then no currently running batches are included. All dates search for batches that have
      completed within that time interval (inclusive).</p>
  </div>
  <div class='bg-slate-100 border rounded overflow-hidden lg:basis-1/2'>
    <div class='text-xl m-4'>
      Total spend: <span class='font-light text-lg'>{{ total_cost }}</span>
    </div>
    <div class='bg-white' x-data='{ tab: "{{ "by-bp" if is_developer else "by-bp-user"}}" }'>
      <div class='flex border-b text-lg'>
        {% if is_developer %}
        <div class='px-4 pt-4 pb-2 hover:opacity-100 hover:cursor-pointer hover:border-b border-black'
          :class='{"border-b": tab == "by-bp", "opacity-50": tab != "by-bp"}' x-on:click='tab = "by-bp"'>
          By Billing Project
        </div>
        <div class='px-4 pt-4 pb-2 hover:opacity-100 hover:cursor-pointer hover:border-b border-black'
          :class='{"border-b": tab == "by-user", "opacity-50": tab != "by-user"}' x-on:click='tab = "by-user"'>
          By User
        </div>
        {% endif %}
        <div class='px-4 pt-4 pb-2 hover:opacity-100 hover:cursor-pointer hover:border-b border-black'
          :class='{"border-b": tab == "by-bp-user", "opacity-50": tab != "by-bp-user"}' x-on:click='tab = "by-bp-user"'>
          By Billing Project and User
        </div>
      </div>
      {% if is_developer %}
      <div class='relative overflow-hidden transition-all' x-show='tab == "by-bp"'>
        <table class='w-full overflow-auto'>
          <tbody>
            {% for row in billing_by_project %}
            <tr class='border-y'>
              <td class='p-2'>{{ row['billing_project'] }}</td>
              <td class='p-2'>{{ row['cost'] }}</td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
      <div class='relative overflow-hidden transition-all' x-show='tab == "by-user"'>
        <table class='w-full overflow-auto'>
          <tbody>
            {% for row in billing_by_user %}
            <tr class='border-y'>
              <td class='p-2'>{{ row['user'] }}</td>
              <td class='p-2'>{{ row['cost'] }}</td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
      {% endif %}
      <div class='relative overflow-hidden transition-all' x-show='tab == "by-bp-user"'>
        <table class='w-full overflow-auto'>
          <tbody>
            {% for row in billing_by_project_user %}
            <tr class='border-y'>
              <td class='p-2'>{{ row['billing_project'] }}</td>
              <td class='p-2'>{{ row['user'] }}</td>
              <td class='p-2'>{{ row['cost'] }}</td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>
{% endblock %}