{% extends "admin/base.html" %}

{% load i18n admin_tags %}

{% block title %}{% trans "Tags" %}{% endblock %}

{% block breadcrumb %}
    <div class="col-sm-12 pl-0">
      <a href="{% url 'admin:tags' %}">{% trans "Tags" %}</a>
    </div><!-- /.col -->
{% endblock %}

{% block content %}
    <form id="changelist_form" action="{% url 'admin:tags' %}" method="post">
      {% csrf_token %}
        <div class="col-12 p-3">
            <a href="{% url 'admin:tag-add' %}" class="btn btn-success btn-flat" role="button">
              <i class='fa fa-plus'></i>
              {% trans "New" %}
            </a>
        </div>

        {% include "admin/_pagination.html" %}

        <div class="col-12">
          {% if object_list|length > 0 %}
            <table class="table table-striped">
              <thead>
                <tr class="text-uppercase">
                  <th class="border-top-0"> 
                    <div id="checkbox_view">
                      <span class="mr-2"><input type="checkbox" id="action_toggle"></span>{% trans "Tag Name" %}
                    </div>
                  </th>
                  <th  class="border-top-0">{% trans "Pinned?" %}</th>
                  <th  class="border-top-0">{% trans "Description" %}</th>
                </tr>
              </thead>
              <tbody>
                {% for tag in object_list %}
                  <tr>
                    <td>
                      <span class="mr-2">
                        <input type="checkbox" name="_selected_action" value="{{ tag.id }}" />
                      </span>
                      <a href="{% url 'admin:tag-update' tag.id %}" style="background: {{ tag.bg_color }};color: {{ tag.fg_color }}; margin: 1rem 0; padding: 0.25rem 0.5rem; border-radius: 0.5rem;">
                           {{ tag.name }}
                      </a></td>
                    <td><span class="mr-2">
                      {% boolean_icon tag.pinned %}
                    </td>                      
                    <td><span class="mr-2">{{ tag.description |default:'' | safe | truncatechars:96}}
                    </td>
                  </tr>
                {% endfor %}
              </tbody>
            </table>
          {% else %}
            {% trans "No tag so far" %}
          {% endif %}
      </div>
    </form>
{% endblock %}


{% block widgetsbar %}
  <div class="card">
    <div class="card-body">
      <ul class="collection">
        <li class="collection-item">
            <select form="changelist_form" name="action" class="custom-select" required="">
              <option value="" selected="">---------</option>
              <option value="delete_selected">{% trans "Delete selected tags" %}</option>
            </select>
          
        </li>
        <li class="collection-item d-flex flex-row-reverse mt-3">
            <button form="changelist_form" class="btn btn-primary btn-flat mx-1" type="submit">
              <i class="fa fa-check"></i>
              {% trans "Apply" %}
            </button>
        </li>
      </ul>
    </div>
  </div>
{% endblock %}