{# -----------------------------------------------------------------------------
 # Used in Downloaded / Uploaded pages #}
 #--------------------------------------------------------------------------- #}
{% macro render_pagination() %}
<nav class="mt-4" aria-label="{{ _('Pagination') }}">
  <ul class="pagination justify-content-end">
    <li class="page-item" :class="{ disabled: page === 1 }">
      <a href="#" class="page-link" :aria-disabled="page === 1" @click.prevent="prevPage()">{{ _('Previous') }}</a>
    </li>

    <template x-for="pObj in visiblePages" :key="pObj.page ?? Math.random()">
      <li class="page-item" :class="{ active: page === pObj.page, disabled: pObj.isEllipsis }">
        <a href="#" class="page-link" :aria-current="page === pObj.page ? 'page' : undefined"
           @click.prevent="if (!pObj.isEllipsis) goToPage(pObj.page)"
           x-text="pObj.isEllipsis ? '…' : pObj.page"></a>
      </li>
    </template>

    <li class="page-item" :class="{ disabled: page === totalPages }">
      <a href="#" class="page-link" :aria-disabled="page === totalPages" @click.prevent="nextPage()">{{ _('Next') }}</a>
    </li>
  </ul>
</nav>
{% endmacro %}

{% macro render_search() %}
<label for="search" class="visually-hidden">{{ _('Search') }}</label>
<div class="input-group">
  <span class="input-group-text"><i class="fas fa-search"></i></span>

  <input id="search" class="form-control" type="text" placeholder="{{ _('Search') }}"
    x-model="search"
    @input.debounce.300ms="load()" />
</div>
{% endmacro %}


{# -----------------------------------------------------------------------------
 # Used homepage
 #--------------------------------------------------------------------------- #}
{% macro task_box(title, icon, status_key, task_key, status_time) %}
<div class="d-flex align-items-center" x-data="TaskStatusComponent(
  '{{ url_for('api.taskstatuses_task_statuses', key=status_key) }}',
  '{{ url_for('api.tasks_tasks', key=task_key) }}',
  '{{ title }}')">
  <div class="border rounded-3 p-2 me-3"><i class="fa-solid fa-{{ icon }} fs-4"></i></div>
  <div class="flex-grow-1">
    <div class="fw-semibold">{{ title }}</div>
    <div class="small text-body-secondary" x-show="loading"><div class="spinner-border spinner-border-sm"></div> {{ _('Loading...') }}</div>
    <div class="small text-body-secondary" x-show="!loading && !error" x-text="taskStatusMessage"></div>
    <div class="small text-danger" x-show="error" x-text="error"></div>
  </div>
  <div class="d-flex align-items-center gap-3 ms-3">
    <i class="fa-solid fa-circle" :class="taskStatusIndicatorClass({{- status_time -}})"></i>
    <button class="btn btn-xs btn-outline-secondary rounded-pill"
            :disabled="tasking"
            @click="taskLaunch()">
      <template x-if="!tasking">
        <i class="fas fa-play"></i>
      </template>
      <template x-if="tasking">
        <div class="spinner-border spinner-border-sm"></div> {{ _('Loading...') }}</div>
      </template>
    </button>
  </div>
</div>
{% endmacro %}

{% macro card_stats(title, subtitle, icon, icon_color, field_period, field_data="human_size", field_trend="trend_size") %}
<div class="col-12 col-sm-6 col-md-4 col-xl-3 col-xxl-2">
  <div class="card h-100 bg-body-secondary">
    <div class="card-body">
      <div class="d-flex align-items-center gap-3">
        <div class="border rounded-3 p-2"><i class="fa-solid {{ icon_color }} fa-{{ icon }} fs-5"></i></div>
        <div>
          <div class="fw-semibold fs-7">{{ title }}</div>
          <div class="text-body-secondary fs-7">{{ subtitle }}</div>
        </div>
      </div>

      <div class="fs-2 fw-semibold mt-3" x-show="loading"><div class="spinner-border spinner-border-sm"></div></div>
      <div class="fs-2 fw-semibold mt-3" x-show="!loading && !error" x-text="{{field_period}}?.{{field_data}}"></div>
      <div class="small text-danger" x-show="error" x-text="error"></div>

      <div class="small" x-show="loading"><div class="spinner-border spinner-border-sm"></div> {{ _('Loading...') }}</div>
      <div class="small"
           :class="{'text-success': {{field_period}}?.{{field_trend}}?.startsWith('+'), 'text-danger': {{field_period}}?.{{field_trend}}?.startsWith('-')}"
           x-show="!loading && !error">
        <i class="fa-solid" :class="{'fa-arrow-up': {{field_period}}?.{{field_trend}}?.startsWith('+'), 'fa-arrow-down': {{field_period}}?.{{field_trend}}?.startsWith('-')}"></i>
        <span x-text="{{field_period}}?.{{field_trend}}"></span>
      </div>
      <div class="small text-danger" x-show="error" x-text="error"></div>
    </div>
  </div>
</div>
{% endmacro %}


{# -----------------------------------------------------------------------------
 # Used in stats page
 #--------------------------------------------------------------------------- #}
{% macro stats_chart(title, canvas_id, class="col-12 col-md-6") %}
<div class="{{ class }}">
  <div class="card bg-body-tertiary shadow">
    <div class="card-body">
      <h2 class="h4 card-title">{{ title }}</h2>
      <canvas id="{{ canvas_id }}"></canvas>
    </div>
  </div>
</div>
{% endmacro %}

{# -----------------------------------------------------------------------------
 # Used in several page
 #--------------------------------------------------------------------------- #}
{% macro mime_icon() %}
<i :class="$getMimeIconClass(row.mime_type)"
   data-bs-toggle="tooltip"
   data-bs-html="true"
   :data-bs-title="'<strong>{{ _('MIME type:') }}</strong> ' + row.mime_type + '<br><strong>{{ _('Confidence:') }}</strong> ' + row.mime_confidence"
   x-init="new Tooltip($el)"></i>
{% endmacro %}

{% macro torrent_icon() %}
<i :class="$getMimeIconClass('application/x-bittorrent')"
   data-bs-toggle="tooltip"
   data-bs-html="true"
   :data-bs-title="'<strong>{{ _('Announcer:') }}</strong> ' + row.announcer +
    (row.source ? '<br><strong>{{ _('Source:') }}</strong> ' + row.source : '')"
   x-init="new Tooltip($el)"></i>
{% endmacro %}

{% macro breadcrumb(items) %}
<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    {% for text, link in items %}
      {% if not loop.last and link %}
        <li class="breadcrumb-item"><a href="{{ link }}">{{ text }}</a></li>
      {% else %}
        <li class="breadcrumb-item{% if loop.last %} active{% endif %}" {% if loop.last %}aria-current="page"{% endif %}>{{ text }}</li>
      {% endif %}
    {% endfor %}
  </ol>
</nav>
{% endmacro %}

{% macro datepicker_range(x_ref, label = True) %}
{% set labels = {
  'previous': _('Previous'),
  'next': _('Next'),
  'today': _('Today'),
  'clear': _('Clear'),
  'dialog': _('Choose date'),
  'switchView': _('Switch calendar view'),
  'presets': _('Choose date'),
  'weekAbbr': _('Wk'),
}
%}
<label {% if not label %}class="visually-hidden"{% endif %} for="datepicker-range">{{ _('Period') }}</label>
<div class="input-group">
  <span class="input-group-text">
    <i class="fas fa-calendar"></i>
  </span>
  <input class="form-control" id="datepicker-range" x-ref="{{ x_ref }}" />
</div>
<script>
  document.addEventListener("DOMContentLoaded", () => {
    new DatePicker('#datepicker-range', {
      range: true,
      panes: 2,
      presets: "today, yesterday, last7, last30, thisMonth, lastMonth, thisYear",
      locale: "{{- lang -}}",
      theme: "{{- theme -}}",
      styles: true,
      todayButton: true,
      clearButton: true,
      labels: {{- labels | tojson -}}
    })
  });
</script>
{% endmacro %}