{% extends "base.html" %}
{% from '_sla_badge.html' import sla_badge %}
{% 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-md-3">
        <label class="form-label small mb-1">SLA</label>
        <select name="sla" class="form-select form-select-sm">
          <option value="">All</option>
          <option value="breached" {{ 'selected' if sla_filter == 'breached' }}>Breached</option>
          <option value="at_risk"  {{ 'selected' if sla_filter == 'at_risk'  }}>At Risk</option>
          <option value="ok"       {{ 'selected' if sla_filter == 'ok'       }}>On Track</option>
        </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 issue_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>SLA</th>
            <th>Assigned</th>
            <th></th>
          </tr>
        </thead>
        <tbody>
          {% for issue in issue_items %}
          {% set is_following = issue.id in followed_ids %}
          <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.resolved_facility.name if issue.resolved_facility else '—' }}<br>
              <small class="text-muted">{{ issue.area.name if issue.area else '—' }}</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>{{ sla_badge(issue) }}</td>
            <td>
              {% if issue.assigned_user %}{{ issue.assigned_user.display_name }}
              {% else %}<span class="text-muted">—</span>{% endif %}
            </td>
            <td class="text-nowrap">
              {# Following badge + inline unfollow #}
              {% if is_following %}
              <span class="badge bg-primary me-1" title="You are following this issue">
                <i class="bi bi-bell-fill"></i> Following
              </span>
              <form method="post"
                    action="{{ url_for('issues.unfollow', issue_id=issue.id) }}"
                    class="d-inline"
                    title="Unfollow this issue">
                <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                <input type="hidden" name="next" value="{{ url_for('issues.index', page=issues.page, severity=severity_filter, status=status_filter) }}">
                <button type="submit" class="btn btn-sm btn-outline-primary p-0 px-1 me-1"
                        title="Unfollow">
                  <i class="bi bi-bell-slash" style="font-size:.75rem;"></i>
                </button>
              </form>
              {% endif %}

              <a href="{{ url_for('issues.view', issue_id=issue.id) }}"
                 class="btn btn-sm btn-outline-secondary">
                {% if current_user.role in ['admin','supervisor'] or issue.assigned_to == current_user.id %}
                  <i class="bi bi-pencil"></i> Edit
                {% else %}
                  <i class="bi bi-eye"></i> View
                {% endif %}
              </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 %}