{% extends "base.html" %}
{% block title %}Issues{% endblock %}
{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4">
  <h2><i class="bi bi-exclamation-triangle"></i> Issues</h2>
  {% if current_user.role in ['admin','supervisor'] %}
  <a href="{{ url_for('issues.create') }}" class="btn btn-danger">
    <i class="bi bi-plus-circle"></i> Log Issue
  </a>
  {% endif %}
</div>

<div class="card shadow-sm mb-4">
  <div class="card-body py-2">
    <form method="get" class="row g-2 align-items-end">
      <div class="col-md-3">
        <label class="form-label small mb-1">Severity</label>
        <select name="severity" class="form-select form-select-sm">
          <option value="">All</option>
          {% for s in ['critical','high','medium','low'] %}
          <option value="{{ s }}" {{ 'selected' if severity_filter == s }}>{{ s|title }}</option>
          {% endfor %}
        </select>
      </div>
      <div class="col-md-3">
        <label class="form-label small mb-1">Status</label>
        <select name="status" class="form-select form-select-sm">
          <option value="">All</option>
          {% for s in ['open','in_progress','resolved'] %}
          <option value="{{ s }}" {{ 'selected' if status_filter == s }}>{{ s|replace('_',' ')|title }}</option>
          {% endfor %}
        </select>
      </div>
      <div class="col-auto">
        <button type="submit" class="btn btn-sm btn-outline-primary">Filter</button>
        <a href="{{ url_for('issues.index') }}" class="btn btn-sm btn-outline-secondary">Clear</a>
      </div>
    </form>
  </div>
</div>

<div class="card shadow-sm">
  <div class="card-body p-0">
    {% if issues.items %}
    <div class="table-responsive">
      <table class="table table-hover mb-0">
        <thead class="table-light">
          <tr><th>Reported</th><th>Severity</th><th>Facility / Area</th>
              <th>Description</th><th>Status</th><th>Assigned</th><th></th></tr>
        </thead>
        <tbody>
          {% for issue in issues.items %}
          <tr>
            <td><small>{{ issue.reported_at.strftime('%Y-%m-%d %H:%M') }}</small></td>
            <td>
              <span class="badge bg-{{ 'danger' if issue.severity in ['critical','high'] else 'warning text-dark' if issue.severity == 'medium' else 'secondary' }}">
                {{ issue.severity|title }}
              </span>
            </td>
            <td>
              {{ issue.area.facility.name }}<br>
              <small class="text-muted">{{ issue.area.name }}</small>
            </td>
            <td>{{ issue.description[:60] }}{% if issue.description|length > 60 %}…{% endif %}</td>
            <td>
              <span class="badge bg-{{ 'success' if issue.status == 'resolved' else 'warning text-dark' if issue.status == 'in_progress' else 'danger' }}">
                {{ issue.status|replace('_',' ')|title }}
              </span>
            </td>
            <td>
              {% if issue.assigned_user %}{{ issue.assigned_user.username }}
              {% else %}<span class="text-muted">—</span>{% endif %}
            </td>
            <td><a href="{{ url_for('issues.view', issue_id=issue.id) }}" class="btn btn-sm btn-outline-secondary">View</a></td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
    {% if issues.pages > 1 %}
    <div class="d-flex justify-content-center py-3">
      <nav><ul class="pagination pagination-sm mb-0">
        {% for p in issues.iter_pages(left_edge=1,right_edge=1,left_current=2,right_current=2) %}
          {% if p %}
          <li class="page-item {{ 'active' if p == issues.page }}">
            <a class="page-link" href="{{ url_for('issues.index', page=p, severity=severity_filter, status=status_filter) }}">{{ p }}</a>
          </li>
          {% else %}<li class="page-item disabled"><span class="page-link">…</span></li>{% endif %}
        {% endfor %}
      </ul></nav>
    </div>
    {% endif %}
    {% else %}
    <div class="alert alert-info m-3"><i class="bi bi-info-circle"></i> No issues found.</div>
    {% endif %}
  </div>
</div>
{% endblock %}