{% extends "admin/change_form.html" %}
{% load i18n admin_urls static admin_list ow_tags %}

{% block extrahead %}
{{ block.super }}
<link rel="stylesheet" type="text/css" href="{% static "admin/css/changelists.css" %}">
<link rel="stylesheet" type="text/css" href="{% static "admin/css/ow-filters.css" %}">
<link rel="stylesheet" type="text/css" href="{% static "firmware-upgrader/css/batch-upgrade-operation.css" %}">
<link rel="stylesheet" type="text/css" href="{% static "firmware-upgrader/css/upgrade-progress.css" %}">
{% endblock %}

{% block content %}
{{ block.super }}

<!-- Upgrade Operations Section -->
<h1 class="upgrade-operations-title">{% trans "Upgrade Operations" %}</h1>

<!-- OpenWISP Filter Section -->
{% if filter_specs %}
<div id="ow-changelist-filter">
  <div class="filters-bottom">
    <span class="left-arrow">
      <img src="{% static "ui/openwisp/images/left-arrow.svg" %}" alt="{% trans 'left' %}">
    </span>
    <span class="right-arrow">
      <img src="{% static "ui/openwisp/images/right-arrow.svg" %}" alt="{% trans 'right' %}">
    </span>
    <div aria-label="{% trans 'changelist filters region' %}" tabindex="0" class="ow-filter-slider">
      <div class="slider">
        {% for spec in filter_specs %}
        <div class="ow-filter {{ spec.title|join_string }}">
          {% for choice in spec.choices %}
          {% if choice.selected %}
          <div id="{{ spec.title|join_string }}" aria-label="{% trans 'by' %} {{ spec.title }}" tabindex="0"
            aria-controls="choices-{{ spec.title|join_string }}" role="button" aria-expanded="false"
            class="filter-title">
            <h3>
              {% blocktrans with filter_title=spec.title %} By {{ filter_title }} {% endblocktrans %}
            </h3>
            <div class="selected-option" tabindex="0" title="{{ choice.display }}">
              {{ choice.display }}
            </div>
          </div>
          {% endif %}
          {% endfor %}
          <div id="choices-{{ spec.title|join_string }}" role="region" aria-labelledby="{{ spec.title|join_string }}"
            class="filter-options">
            <ul>
              {% for choice in spec.choices %}
              <li>
                <a {% if choice.selected %} class="selected" {% endif %}
                  title="{{ choice.display | default_if_none:'------'}}" href="{{ choice.query_string|iriencode }}">
                  {{ choice.display | default_if_none:'------' }}
                </a>
              </li>
              {% endfor %}
            </ul>
          </div>
        </div>
        {% endfor %}
      </div>
    </div>
  </div>
  <div class="filters-top">
    <h2>{% trans 'Filter' %}</h2>
    <div class="filters-control">
      {% if has_active_filters %}
      <h3 id="changelist-filter-clear" class="filter-clear-heading">
        <a href="?{% if request.GET.q %}q={{ request.GET.q|urlencode }}{% endif %}" class="filter-clear-link">&#10006; {% trans "Clear all filters" %}</a>
      </h3>
      {% endif %}
      {% if filter_specs|length > 4 %}
      <button id="ow-apply-filter" class="danger-btn">{% trans "Apply Filters" %}</button>
      {% endif %}
    </div>
  </div>
</div>
{% endif %}

<!-- Search Bar -->
<div class="search-section">
  <form method="get" class="search-form">
    <svg class="search-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
      <circle cx="11" cy="11" r="8"></circle>
      <path d="m21 21-4.35-4.35"></path>
    </svg>
    <input type="text" id="searchbar" name="q" aria-label="{% trans 'Search devices...' %}"
      placeholder="{% trans 'Search devices...' %}" value="{{ request.GET.q }}" class="search-input">
    <button type="submit" class="search-button">{% trans "Search" %}</button>
    {% for param, value in request.GET.items %}
    {% if param != 'q' and param != 'page' %}
    <input type="hidden" name="{{ param }}" value="{{ value }}">
    {% endif %}
    {% endfor %}
  </form>
</div>

<!-- Results Table -->
<div class="results-container">
  <table id="result_list" class="results-table">
    <thead>
      <tr>
        <th>{% trans "Device" %}</th>
        <th>{% trans "Status" %}</th>
        <th>{% trans "Image" %}</th>
        <th>{% trans "Last Updated" %}</th>
      </tr>
    </thead>
    <tbody>
      {% for operation in upgrade_operations %}
      <tr class="{% cycle 'row1' 'row2' %}">
        <td>
          <a href="{% url 'admin:'|add:upgrade_operation_app_label|add:'_upgradeoperation_change' operation.id %}"
            class="device-link" aria-label="{% trans 'View device' %} {{ operation.device.name }}">
            {{ operation.device.name }}
          </a>
        </td>
        <td class="status-cell" data-operation-id="{{ operation.id }}" data-operation-status="{{ operation.status }}">
          <div class="status-content">{{ operation.get_status_display }}</div>
        </td>
        <td>
          {% if operation.image %}
          {{ operation.image }}
          {% else %}
          {% trans "None" %}
          {% endif %}
        </td>
        <td>{{ operation.modified|date }}</td>
      </tr>
      {% empty %}
      <tr>
        <td colspan="4" class="empty-results">{% trans "No device upgrades found." %}</td>
      </tr>
      {% endfor %}
    </tbody>
  </table>

  <!-- Results Count -->
  {% if paginator %}
  <p class="paginator">
    {% blocktrans count counter=paginator.count %}
      {{ counter }} upgrade operation
      {% plural %}{{ counter }} upgrade operations
    {% endblocktrans %}
  </p>
  {% endif %}

  <!-- Pagination -->
  {% if page_obj.has_other_pages %}
  <div class="pagination">
    <span class="step-links">
      {% if page_obj.has_previous %}
      <a href="?{% for key,value in request.GET.items %}{% if key != 'page' %}{{ key }}={{ value|urlencode }}&{% endif %}{% endfor %}page={{ page_obj.previous_page_number }}">
        {% trans 'Previous' %}
      </a>
      {% endif %}
      <span class="current-page">
        {% trans 'Page' %} {{ page_obj.number }} {% trans 'of' %} {{ page_obj.paginator.num_pages }}
      </span>
      {% if page_obj.has_next %}
      <a href="?{% for key,value in request.GET.items %}{% if key != 'page' %}{{ key }}={{ value|urlencode }}&{% endif %}{% endfor %}page={{ page_obj.next_page_number }}">
        {% trans 'Next' %}
      </a>
      {% endif %}
    </span>
  </div>
  {% endif %}
</div>
{% endblock %}

{% block footer %}
{{ block.super }}
<script src="{% static "admin/js/ow-filter.js" %}"></script>
<script type="text/javascript" src="{% static 'connection/js/lib/reconnecting-websocket.min.js' %}"></script>
<script>
  // Configuration for WebSocket connection
  var owFirmwareUpgraderApiHost = {
    host: "{{ request.get_host|escapejs }}"
  };
  var owDeviceUpgradeOperationUrl = "{{ upgrade_operation_path }}";
  window.djangoLocale = "{{ django_locale|default:"en-us" }}";
</script>
<script type="text/javascript" src="{% static 'firmware-upgrader/js/upgrade-utils.js' %}"></script>
<script type="text/javascript" src="{% static 'firmware-upgrader/js/batch-upgrade-progress.js' %}"></script>
<script>
django.jQuery(function($) {
  var statusField = $('.field-status .readonly');
    if (statusField.length && !statusField.find('.batch-main-progress').length) {
      statusField.append('<div class="batch-main-progress"></div>');
    }
});
</script>
{% endblock %}