{% extends 'cards/base.html' %}

{% block content %}
  <div class="level">
    <div class="level-left">
      <div class="level-item">
        <button class="button is-primary" hx-get="{% url 'cards:create' %}" hx-target="#modal-root" hx-swap="innerHTML">Add Dinosaur</button>
      </div>
      <div class="level-item">
        <a class="button is-light" href="{% url 'cards:backgrounds' %}">Manage backgrounds</a>
      </div>
      <div class="level-item">
        <a class="button is-light" href="{% url 'cards:overview' %}">Bulk edit</a>
      </div>
      <div class="level-item">
        <a class="button is-light" href="{% url 'cards:export_table' %}">Export table</a>
      </div>
      <div class="level-item">
        <a class="button is-light" href="{% url 'cards:print' %}">Print cards</a>
      </div>
    </div>
  </div>
  {% if card_count is not None %}
    <div class="level-item">
      <span class="tag is-light">{{ card_count }} card{% if card_count > 1 %}s{% endif %}</span>
    </div>
  {% endif %}

  <div id="htmx-form"></div>

  <form id="cards-filter" method="get" hx-get="{% url 'cards:list' %}" hx-target="#cards-list" hx-swap="innerHTML" hx-trigger="change delay:250ms">
    <div class="field has-addons">
      <div class="control">
        <input class="input" type="search" name="q" placeholder="Search name…" value="{{ current_q }}">
      </div>
      <div class="control">
        <div class="select">
          <select name="era">
            <option value="all" {% if current_era == 'all' %}selected{% endif %}>All eras</option>
            {% for code,label in eras %}
              <option value="{{ code }}" {% if current_era == code %}selected{% endif %}>{{ label }}</option>
            {% endfor %}
          </select>
        </div>
      </div>
      <div class="control">
        <div class="select">
          <select name="diet">
            <option value="all" {% if current_diet == 'all' %}selected{% endif %}>All diets</option>
            {% for code,label in diets %}
              <option value="{{ code }}" {% if current_diet == code %}selected{% endif %}>{{ label }}</option>
            {% endfor %}
          </select>
        </div>
      </div>
      <div class="control">
        <div class="select">
          <select name="sort">
            <option value="" {% if not current_sort %}selected{% endif %}>Sort (default)</option>
            <option value="name" {% if current_sort == 'name' %}selected{% endif %}>Name</option>
            <option value="created" {% if current_sort == 'created' %}selected{% endif %}>Newest</option>
            <option value="speed" {% if current_sort == 'speed' %}selected{% endif %}>Speed</option>
            <option value="weight" {% if current_sort == 'weight' %}selected{% endif %}>Weight</option>
            <option value="height" {% if current_sort == 'height' %}selected{% endif %}>Height</option>
            <option value="intelligence" {% if current_sort == 'intelligence' %}selected{% endif %}>Intelligence</option>
          </select>
        </div>
      </div>
      <div class="control">
        <div class="select">
          <select name="order">
            <option value="asc" {% if current_order == 'asc' %}selected{% endif %}>Asc</option>
            <option value="desc" {% if current_order == 'desc' %}selected{% endif %}>Desc</option>
          </select>
        </div>
      </div>
      <div class="control">
        <button class="button is-info" type="submit">Apply</button>
      </div>
    </div>
  </form>

  <div id="cards-list">
    {% include 'cards/_cards_list.html' %}
  </div>

{% endblock %}