Jade/views/partials/popover-usage.html

<div class="dropdown is-up is-right {% if IsActive %}is-active{% endif %}"
     id="usage-dropdown">
  <div class="dropdown-trigger">
    <button class="button is-small to-reduce-opacity"
            aria-haspopup="true"
            aria-controls="dropdown-menu3"
            onclick="this.parentElement.parentElement.classList.toggle('is-active')">
      <span class="icon"><i class="fa-regular fa-money-bill-1"></i></span>
    </button>
  </div>
  <div class="dropdown-menu" id="dropdown-menu3" role="menu">
    <div class="dropdown-content">
      <div class="dropdown-item">
        <!-- Placeholder for additional text -->
        <div class="content"
             id="usage-content"
             style="max-height: 30vh;
                    overflow-y: auto">
          <table class="table is-narrow is-fullwidth is-striped"
                 style="max-width: 200px">
            <tbody>
              {% for usage in usages %}
                <tr>
                  <td>
                    <small>{{ usage.Key.ModelID }}</small>
                  </td>
                  <td class="has-text-right totalCostCell">
                    <small>{{ usage.TotalCost|floatformat:2 }}$</small>
                  </td>
                  <td class="has-text-right is-hidden totalCountCell">
                    <small>{{ usage.TotalCount }}</small>
                  </td>
                </tr>
              {% endfor %}
            </tbody>
          </table>
        </div>
        <!-- Total cost -->
        <div class="content totalCostCell">
          <p>
            <strong>Total:</strong>
            <span class="totalCost">{{ TotalCost|floatformat:2 }}$</span>
          </p>
        </div>
        <!-- Total count -->
        <div class="content is-hidden totalCountCell">
          <p>
            <strong>Total:</strong>
            <span class="totalCount">{{ TotalCount }} messages</span>
          </p>
        </div>
        <!-- Top buttons -->
        <div class="buttons has-addons is-centered">
          <button class="button is-small is-primary"
                  title="Money Spent"
                  id="money-spent-button">
            <span class="icon ml-4 mr-4"><i class="fa-regular fa-money-bill-1"></i></span>
          </button>
          <button class="button is-small"
                  title="Messages Sent"
                  id="messages-sent-button">
            <span class="icon ml-4 mr-4"><i class="fa-regular fa-envelope"></i></span>
          </button>
        </div>
        <!-- Row with text and buttons -->
        <div class="level is-mobile">
          <div class="level-left">
            <button class="button is-small"
                    hx-get="/loadUsageKPI?month={{ DateID }}&offset=-1"
                    hx-swap="outerHTML"
                    hx-target="#usage-dropdown">
              <span class="icon"><i class="fa-solid fa-chevron-left"></i></span>
            </button>
          </div>
          <div class="level-item">
            <p>{{ Date }}</p>
          </div>
          <div class="level-right">
            <button class="button is-small"
                    hx-get="/loadUsageKPI?month={{ DateID }}&offset=1"
                    hx-swap="outerHTML"
                    hx-target="#usage-dropdown">
              <span class="icon"><i class="fa-solid fa-chevron-right"></i></span>
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<script>
    document.addEventListener('click', function (event) {
        if (!document.getElementById('usage-dropdown').contains(event.target)) {
            document.getElementById('usage-dropdown').classList.remove('is-active');
        }
    });

    document.getElementById('money-spent-button').addEventListener('click', function () {
        document.getElementById('money-spent-button').classList.add('is-primary');
        document.getElementById('messages-sent-button').classList.remove('is-primary');
        // Change all totalCountCell to is-hidden and remove is-hidden from totalCostCell
        const totalCountCells = document.getElementsByClassName('totalCountCell');
        for (let i = 0; i < totalCountCells.length; i++) {
            totalCountCells[i].classList.add('is-hidden');
        }
        const totalCostCells = document.getElementsByClassName('totalCostCell');
        for (let i = 0; i < totalCostCells.length; i++) {
            totalCostCells[i].classList.remove('is-hidden');
        }
    })

    document.getElementById('messages-sent-button').addEventListener('click', function () {
        document.getElementById('messages-sent-button').classList.add('is-primary');
        document.getElementById('money-spent-button').classList.remove('is-primary');
        // Change all totalCostCell to is-hidden and remove is-hidden from totalCountCell
        const totalCostCells = document.getElementsByClassName('totalCostCell');
        for (let i = 0; i < totalCostCells.length; i++) {
            totalCostCells[i].classList.add('is-hidden');
        }
        const totalCountCells = document.getElementsByClassName('totalCountCell');
        for (let i = 0; i < totalCountCells.length; i++) {
            totalCountCells[i].classList.remove('is-hidden');
        }
    })
</script>

<style>
    .level {
        width: 100%;
        /* Ensure the level takes the full width of its container */
        max-width: 300px;
        /* Set a max-width to keep the popover size consistent */
        margin: 0 auto;
        /* Center the level horizontally */
    }

    .level-item p {
        white-space: nowrap;
        /* Prevent the text from wrapping */
    }

    /* For Webkit-based browsers (Chrome, Safari) */
    #usage-content::-webkit-scrollbar {
        width: 0;
        background: transparent;
    }

    /* For IE, Edge and Firefox */
    #usage-content {
        scrollbar-width: none;
        /* Firefox */
        -ms-overflow-style: none;
        /* IE and Edge */
    }
</style>