Ruby-Cogs/levelup/dashboard/templates/leaderboard.html

<script
  defer
  src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"
></script>

<div class="leaderboard-container" x-data="leaderBoard({{ data }})">
  <div class="d-flex justify-content-between align-items-center">
    <h5 class="me-auto stats-info" type="text" x-text="total"></h5>

    <div class="dropdown">
      <a
        class="btn btn-secondary"
        role="button"
        id="sort_by_dropdown"
        data-toggle="dropdown"
        aria-haspopup="true"
        aria-expanded="false"
      >
        Sort by <i class="ni ni-bold-down"></i>
      </a>
      <div class="dropdown-menu" aria-labelledby="sort_by_dropdown">
        <a class="dropdown-item" href="{{ url_for_query(stat=None) }}"
          >{% if stat == "exp" %}<i
            class="ni ni-check-bold me-2"
            style="vertical-align: -1.5px"
          ></i
          >{% endif %}Exp</a
        >
        <a class="dropdown-item" href="{{ url_for_query(stat='messages') }}"
          >{% if stat == "messages" %}<i
            class="ni ni-check-bold me-2"
            style="vertical-align: -1.5px"
          ></i
          >{% endif %}Messages</a
        >
        <a class="dropdown-item" href="{{ url_for_query(stat='voice') }}"
          >{% if stat == "voice" %}<i
            class="ni ni-check-bold me-2"
            style="vertical-align: -1.5px"
          ></i
          >{% endif %}Voice</a
        >
        <a class="dropdown-item" href="{{ url_for_query(stat='stars') }}"
          >{% if stat == "stars" %}<i
            class="ni ni-check-bold me-2"
            style="vertical-align: -1.5px"
          ></i
          >{% endif %}Stars</a
        >
      </div>
    </div>
    {% if position_url %}
    <a
      href="{{ position_url }}"
      class="btn bg-gradient-{{ variables['meta']['color'] }} position-btn"
    >
      Go to my position
    </a>
    {% endif %}
  </div>

  <div class="search-container my-3">
    <div class="search-input-container d-flex align-items-center mb-2">
      <input
        type="text"
        x-text="searchQuery"
        x-model="searchQuery"
        class="form-control w-100"
        x-bind:class="{ 'trippy-search': trippyMode }"
        placeholder="{{ _('Search for a user...') }}"
      />
      <div class="trippy-toggle ms-2">
        <input
          class="toggle-input"
          type="checkbox"
          id="trippyToggle"
          x-model="trippyEnabled"
          @click="toggleTrippy()"
        />
        <label class="toggle-label" for="trippyToggle"></label>
      </div>
    </div>

    <div
      class="pagination-controls my-3 d-flex justify-content-between align-items-center"
    >
      <button
        class="btn btn-primary"
        x-on:click="prevPage()"
        x-bind:disabled="page === 1"
      >
        Previous
      </button>
      <div class="d-flex flex-column align-items-center">
        <span x-text="'Page ' + page + ' of ' + getPageCount()"></span>
        <div class="dropdown">
          <button
            class="btn btn-sm btn-secondary dropdown-toggle mt-1"
            type="button"
            id="per_page_dropdown"
            data-toggle="dropdown"
            aria-haspopup="true"
            aria-expanded="false"
          >
            <span x-text="perPage"></span> per page
          </button>
          <div class="dropdown-menu" aria-labelledby="per_page_dropdown">
            <a class="dropdown-item" x-on:click="setPerPage(25)" href="#"
              ><span x-show="perPage === 25"
                ><i
                  class="ni ni-check-bold me-2"
                  style="vertical-align: -1.5px"
                ></i></span
              >25</a
            >
            <a class="dropdown-item" x-on:click="setPerPage(50)" href="#"
              ><span x-show="perPage === 50"
                ><i
                  class="ni ni-check-bold me-2"
                  style="vertical-align: -1.5px"
                ></i></span
              >50</a
            >
            <a class="dropdown-item" x-on:click="setPerPage(100)" href="#"
              ><span x-show="perPage === 100"
                ><i
                  class="ni ni-check-bold me-2"
                  style="vertical-align: -1.5px"
                ></i></span
              >100</a
            >
            <a class="dropdown-item" x-on:click="setPerPage(1000)" href="#"
              ><span x-show="perPage === 1000"
                ><i
                  class="ni ni-check-bold me-2"
                  style="vertical-align: -1.5px"
                ></i></span
              >All</a
            >
          </div>
        </div>
      </div>
      <button
        class="btn btn-primary"
        x-on:click="nextPage()"
        x-bind:disabled="page * perPage >= filterUsers().length"
      >
        Next
      </button>
    </div>

    <div id="users-container" class="table-container">
      <table class="table align-items-center mb-0">
        <thead>
          <tr>
            <td class="medium"><b>#</b></td>
            <td class="large"><b>Name:</b></td>
            <td class="medium"><b>{{ statname }}:</b></td>
          </tr>
        </thead>
        <tbody>
          <template x-for="user in getPageUsers()" :key="user.id">
            <!-- If user is current user, highlight row in blue -->
            <tr
              x-bind:class="{ 'bg-gradient-primary': user.id === currentUserId }"
            >
              <td class="medium" x-text="user.position"></td>
              <td class="large" x-text="user.name" x-bind:title="user.id"></td>
              <td class="medium" x-text="user.stat"></td>
            </tr>
          </template>
        </tbody>
      </table>
    </div>
    <!-- End of table-container -->
  </div>
</div>