{% extends "authorized_base.html" %}
{% import 'macros/ordering.html' as ordering_macros %}
{% import 'macros/fields.html' as fields %}

{% block subnav_header %}
  Images
{% endblock %}

{% block content %}
  <section>
      <div class="ui segment no-padding transparent">
      <div class="ui grid table-bar">
        <div class="ui six wide column left floated">
          <button class="ui button pink tiny" id="add-image-button"><img class="icon" src="{{ static_url_for('static', filename='img/icons/plus.svg') }}">Add Image</button>
          <form id="add-image-form" method="post" action="{{ url_for('.upload_image') }}" enctype="multipart/form-data">
            <input type="file"  accept=".jpg, .jpe, .jpeg, .png, .gif, .svg, .bmp, .webp|image/*" name="file" id="add-image-input" style="display: none">
          </form>
        </div>
      </div>
    </div>
    <div class="ui segment no-padding full-height">
      <table id="images-table" class="ui striped table">
        <thead>
          <tr>
            <th class="image-preview collapsing">
            </th>
            <th class="image-id collapsing">
              {{ ordering_macros.ordering_header("ID", ordering.links["id"]) }}
            </th>
            <th class="image-name">
              {{ ordering_macros.ordering_header("Name", ordering.links["name"]) }}
            </th>
            <th class="image-created_at">
              {{ ordering_macros.ordering_header("Created At", ordering.links["created_at"]) }}
            </th>
            <th class="image-created_at">
              {{ ordering_macros.ordering_header("Created By", ordering.links["created_by_name"]) }}
            </th>
          </tr>
        </thead>
        <tbody>
        {% for image in images %}
          <tr>
            <td class="image-preview">
              <div class="image-wrapper">
              <img src="{{ image.url }}" data-fallbacksrc="{{ static_url_for('static', filename='img/no_image.png') }}" onerror="this.onerror=null; this.src=this.dataset.fallbacksrc">
              </div>
            </td>
            <td class="image-id">
              <a href="{{ url_for('.view_image', image_id=image.id) }}">
                {{ image.id }}
              </a>
            </td>
            <td class="image-name">
              <a href="{{ url_for('.view_image', image_id=image.id) }}">
                {{ image.name }}
              </a>
            </td>
            <td class="image-created_at">
              {{ fields.local_date_value(image.created_at) }}
            </td>
            <td class="image-created_by">
              {{ image.created_by_name|default("N/A", True) }}
            </td>
          </tr>
        {% endfor %}
        </tbody>
      </table>
    </div>
    <div class="ui divider hidden"></div>

    {% include "components/pagination.html" %}

  </section>
{% endblock %}

{% block js %}
  {{ super() }}
  <script src="{{ static_url_for('static', filename='js/images.js') }}"></script>
{% endblock %}