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

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-3">
  <h2 class="mb-0">Feedback</h2>
  <a class="btn btn-primary" href="{{ url_for('main.feedback_new') }}">New</a>
</div>

<form method="get" class="row g-2 mb-3">
  <div class="col-12 col-md-3">
    <input class="form-control" type="text" name="q" value="{{ q }}" placeholder="Search" />
  </div>
  <div class="col-6 col-md-2">
    <select class="form-select" name="type">
      <option value="" {% if item_type == '' %}selected{% endif %}>All types</option>
      <option value="bug" {% if item_type == 'bug' %}selected{% endif %}>Bug</option>
      <option value="feature" {% if item_type == 'feature' %}selected{% endif %}>Feature</option>
    </select>
  </div>
  <div class="col-6 col-md-2">
    <select class="form-select" name="status">
      <option value="all" {% if status == 'all' %}selected{% endif %}>All</option>
      <option value="open" {% if status == 'open' %}selected{% endif %}>Open</option>
      <option value="resolved" {% if status == 'resolved' %}selected{% endif %}>Resolved</option>
    </select>
  </div>
  <div class="col-6 col-md-2">
    <select class="form-select" name="sort">
      <option value="votes" {% if sort == 'votes' %}selected{% endif %}>Most voted</option>
      <option value="newest" {% if sort == 'newest' %}selected{% endif %}>Newest</option>
      <option value="updated" {% if sort == 'updated' %}selected{% endif %}>Updated</option>
    </select>
  </div>
  <div class="col-6 col-md-3">
    <button class="btn btn-outline-secondary" type="submit">Apply</button>
  </div>
  {% if active_role == 'admin' %}
  <div class="col-12">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" name="show_deleted" value="1" id="show_deleted" {% if show_deleted %}checked{% endif %} onchange="this.form.submit()">
      <label class="form-check-label" for="show_deleted">
        Show deleted items
      </label>
    </div>
  </div>
  {% endif %}
</form>

<div class="table-responsive">
  <table class="table table-sm align-middle">
    <thead>
      <tr>
        <th style="width: 90px;">Votes</th>
        <th>Title</th>
        <th style="width: 120px;">Type</th>
        <th style="width: 160px;">Component</th>
        <th style="width: 120px;">Status</th>
        <th style="width: 170px;">Created</th>
        {% if active_role == 'admin' and show_deleted %}
        <th style="width: 140px;">Actions</th>
        {% endif %}
      </tr>
    </thead>
    <tbody>
      {% if not items %}
      <tr>
        <td colspan="6" class="text-muted">No items found.</td>
      </tr>
      {% endif %}

      {% for i in items %}
      <tr {% if i.is_deleted %}style="opacity: 0.6; background-color: var(--bs-secondary-bg);"{% endif %}>
        <td>
          {% if not i.is_deleted %}
          <form method="post" action="{{ url_for('main.feedback_vote', item_id=i.id) }}">
            <input type="hidden" name="ref" value="list" />
            <button type="submit" class="btn btn-sm {% if i.user_voted %}btn-success{% else %}btn-outline-secondary{% endif %}">
              + {{ i.vote_count }}
            </button>
          </form>
          {% else %}
          <span class="text-muted">+ {{ i.vote_count }}</span>
          {% endif %}
        </td>
        <td>
          <a href="{{ url_for('main.feedback_detail', item_id=i.id) }}">{{ i.title }}</a>
          {% if i.is_deleted %}
            <span class="badge text-bg-dark ms-2">Deleted</span>
          {% endif %}
          {% if i.created_by %}
            <div class="text-muted" style="font-size: 0.85rem;">by {{ i.created_by }}</div>
          {% endif %}
          {% if i.is_deleted and i.deleted_at %}
            <div class="text-muted" style="font-size: 0.85rem;">Deleted {{ i.deleted_at|local_datetime }}</div>
          {% endif %}
        </td>
        <td>
          {% if i.item_type == 'bug' %}
            <span class="badge text-bg-danger">Bug</span>
          {% else %}
            <span class="badge text-bg-primary">Feature</span>
          {% endif %}
        </td>
        <td>{{ i.component or '-' }}</td>
        <td>
          {% if i.status == 'resolved' %}
            <span class="badge text-bg-success">Resolved</span>
          {% else %}
            <span class="badge text-bg-warning">Open</span>
          {% endif %}
        </td>
        <td>
          <div>{{ i.created_at|local_datetime }}</div>
          <div class="text-muted" style="font-size: 0.85rem;">Updated {{ i.updated_at|local_datetime }}</div>
        </td>
        {% if active_role == 'admin' and show_deleted %}
        <td>
          {% if i.is_deleted %}
          <form method="post" action="{{ url_for('main.feedback_permanent_delete', item_id=i.id) }}" onsubmit="return confirm('Permanently delete this item and all screenshots? This cannot be undone!');">
            <button type="submit" class="btn btn-sm btn-danger">Permanent Delete</button>
          </form>
          {% endif %}
        </td>
        {% endif %}
      </tr>
      {% endfor %}
    </tbody>
  </table>
</div>
{% endblock %}