{% extends "base.html" %}
{% block title %}Issue #{{ issue.id }}{% endblock %}

{% block extra_css %}
<style>
  .comment-avatar {
    width: 38px; height: 38px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: .9rem; color: #fff;
    flex-shrink: 0;
  }
  .comment-bubble {
    background: #f8f9fa; border: 1px solid #e9ecef;
    border-radius: .5rem; padding: .75rem 1rem;
    flex-grow: 1;
  }
</style>
{% endblock %}

{% block content %}
{% set can_edit = current_user.role in ['admin','director','auditor'] or issue.assigned_to == current_user.id %}
{# The filtered list URL this page was opened from (phase: filter
   preservation). Threaded into every action so an update or delete
   returns to the same filtered page, and used by the Back button. #}
{% set back_url = request.args.get('next') or url_for('issues.index') %}
{# Is the viewer OUR staff? Drives the internal-only chrome on this page: the
   "comments are visible to everyone" warning and the per-comment
   "Customer visible" / "Staff only" badges. Both are instructions about how WE
   work and must never reach a customer account.

   Written as an explicit ALLOWLIST of our own roles, deliberately:

   * It FAILS CLOSED. The obvious form, `not current_user.is_customer_account`,
     fails OPEN — if the attribute is missing for any reason (a process still
     running an older models/user.py after a template-only reload, say) Jinja
     yields Undefined, `not Undefined` is true, and the internal text is shown
     to exactly the people it must be hidden from. An allowlist of literal role
     strings can only ever be true for a role we listed.
   * `external_inspector` is absent ON PURPOSE. This is NOT the rule-87 case:
     rule 87 is about capability/scoping, where a Customer Inspector must
     behave exactly like our own inspector. Here the question is "does this
     person work for us?", which is the one place the two genuinely differ.
     Do not "fix" this by adding external_inspector to the list. #}
{% set viewer_is_our_staff = current_user.role in
     ['admin', 'director', 'project_manager', 'auditor', 'inspector'] %}

<div class="row">
  {# ══════════════════════════════════ LEFT COLUMN ══════════════════════════════════ #}
  <div class="col-lg-8">

    {# ── Issue details ──────────────────────────────────────────────────── #}
    <div class="card shadow-sm mb-4">
      <div class="card-header d-flex justify-content-between align-items-center
                  bg-{{ 'danger' if issue.severity in ['critical','high'] else 'warning' if issue.severity == 'medium' else 'secondary' }}
                  text-{{ 'white' if issue.severity in ['critical','high','low'] else 'dark' }}">
        <h5 class="mb-0"><i class="bi bi-exclamation-triangle"></i> Issue #{{ issue.id }} — {{ issue.severity|title }} Severity</h5>
        <span class="badge bg-{{ 'info text-dark' if issue.status == 'pending_verification' else 'light text-dark' }}">
          {{ issue.status|replace('_',' ')|title }}
        </span>
      </div>
      <div class="card-body">
        <dl class="row mb-0">
          <dt class="col-sm-3">Reported</dt>
          <dd class="col-sm-9">{{ issue.reported_at.strftime('%Y-%m-%d %H:%M') }}</dd>

          <dt class="col-sm-3">Reported By</dt>
          <dd class="col-sm-9">
            {% if issue.reporter %}
              {{ issue.reporter.display_name }}
              {% if issue.reporter.role == 'customer' %}
              <span class="badge bg-info text-dark ms-1">Customer</span>
              {% else %}
              <span class="badge bg-secondary ms-1">{{ issue.reporter.role|replace('_',' ')|title }}</span>
              {% endif %}
            {% else %}
              <span class="text-muted">—</span>
            {% endif %}
          </dd>

          <dt class="col-sm-3">Contract</dt>
          <dd class="col-sm-9">
            {% if issue.resolved_facility and issue.resolved_facility.project %}
              {{ issue.resolved_facility.project.name }}
            {% else %}—{% endif %}
          </dd>

          <dt class="col-sm-3">Facility</dt>
          <dd class="col-sm-9">{{ issue.resolved_facility.name if issue.resolved_facility else '—' }}</dd>

          <dt class="col-sm-3">Area</dt>
          <dd class="col-sm-9">{{ issue.area.name if issue.area else '—' }}</dd>

          {% if issue.inspection %}
          <dt class="col-sm-3">Inspection</dt>
          <dd class="col-sm-9">
            <a href="{{ url_for('inspections.view', inspection_id=issue.inspection_id) }}">#{{ issue.inspection_id }}</a>
          </dd>
          {% endif %}

          <dt class="col-sm-3">Assigned To</dt>
          <dd class="col-sm-9">{{ issue.assigned_user.display_name if issue.assigned_user else '— Unassigned —' }}</dd>

          {% set _ht = issue.handler_type or 'internal' %}
          {% if _ht != 'internal' or issue.internal_handler_name or issue.internal_handler_contact %}
          <dt class="col-sm-3">Handled By</dt>
          <dd class="col-sm-9">
            {% if _ht == 'facility' %}
            <span class="badge bg-secondary">
              <i class="bi bi-building me-1"></i>Facility Staff
            </span>
            {% if issue.facility_handler_name %}
            <span class="ms-2 fw-semibold">{{ issue.facility_handler_name }}</span>
            {% if issue.facility_handler_contact %}
            <span class="text-muted ms-2">{{ issue.facility_handler_contact }}</span>
            {% endif %}
            {% endif %}
            {% if issue.facility_handler_notes %}
            <div class="text-muted small mt-1" style="white-space:pre-wrap;">{{ issue.facility_handler_notes }}</div>
            {% endif %}
            {% elif _ht == 'vendor' %}
            <span class="badge bg-dark"><i class="bi bi-person-gear me-1"></i>External Vendor</span>
            {% else %}
            <span class="badge bg-light text-dark border">
              <i class="bi bi-people me-1"></i>Janitorial Staff
            </span>
            {% if issue.internal_handler_name %}
            <span class="ms-2 fw-semibold">{{ issue.internal_handler_name }}</span>
            {% endif %}
            {% if issue.internal_handler_contact %}
            <span class="text-muted ms-2">{{ issue.internal_handler_contact }}</span>
            {% endif %}
            {% endif %}
          </dd>
          {% endif %}

          {% if issue.vendor_name %}
          <dt class="col-sm-3">Contractor</dt>
          <dd class="col-sm-9">
            <i class="bi bi-person-gear text-secondary me-1"></i>
            <strong>{{ issue.vendor_name }}</strong>
            {% if issue.vendor_contact %}
            <span class="text-muted ms-2">{{ issue.vendor_contact }}</span>
            {% endif %}
            {% if issue.vendor_notes %}
            <div class="text-muted small mt-1" style="white-space:pre-wrap;">{{ issue.vendor_notes }}</div>
            {% endif %}
          </dd>
          {% endif %}

          {% if issue.resolved_at %}
          <dt class="col-sm-3">Resolved</dt>
          <dd class="col-sm-9">{{ issue.resolved_at.strftime('%Y-%m-%d %H:%M') }}</dd>
          {% endif %}
        </dl>

        <hr>
        <h6>Description</h6>
        <p class="mb-0" style="white-space:pre-wrap;">{{ issue.description }}</p>

        {% if issue.photo_path or issue.mobile_photo_paths %}
        <hr>
        <h6>Photo Evidence</h6>
        <div class="d-flex flex-wrap gap-2">
          {% if issue.photo_path %}
          <a href="{{ media_url(issue.photo_path) }}" target="_blank">
            <img src="{{ media_url(issue.photo_path) }}"
                 class="img-fluid rounded" style="max-height:300px; max-width:100%;">
          </a>
          {% endif %}
          {% for photo in (issue.mobile_photo_paths or []) %}
          <a href="{{ media_url(photo) }}" target="_blank">
            <img src="{{ media_url(photo) }}"
                 class="rounded border" style="max-height:300px; max-width:100%; object-fit:cover;">
          </a>
          {% endfor %}
        </div>
        {% endif %}

        {% if issue.result_notes or issue.result_photos %}
        <hr>
        <h6><i class="bi bi-clipboard2-check text-success"></i> Resolution Details</h6>
        {% if issue.result_notes %}
        <p class="mb-2" style="white-space:pre-wrap;">{{ issue.result_notes }}</p>
        {% endif %}
        {% if issue.result_photos %}
        <div class="d-flex flex-wrap gap-2 mt-2">
          {% for photo in issue.result_photos %}
          <a href="{{ media_url(photo) }}" target="_blank">
            <img src="{{ media_url(photo) }}"
                 class="rounded border" style="max-height:120px; max-width:160px; object-fit:cover;"
                 alt="Result photo">
          </a>
          {% endfor %}
        </div>
        {% endif %}
        {% endif %}

        {# ── Verification panel ── #}
        {% if issue.verified_at %}
        <hr>
        <div class="alert alert-success py-2 mb-0">
          <i class="bi bi-patch-check-fill me-1"></i>
          <strong>Verified</strong> by {{ issue.verifier.display_name if issue.verifier else 'unknown' }}
          on {{ issue.verified_at.strftime('%Y-%m-%d %H:%M') }}.
          {% if issue.verification_note %}<br><span class="small">{{ issue.verification_note }}</span>{% endif %}
        </div>
        {% elif issue.status == 'pending_verification' %}
        <hr>
        <div class="alert alert-info py-2 mb-0">
          <i class="bi bi-hourglass-split me-1"></i>
          <strong>Awaiting director verification.</strong>
          {% if current_user.role in ['admin','director','auditor'] %}
          <form method="POST" action="{{ url_for('issues.verify', issue_id=issue.id) }}" class="mt-2">
          <input type="hidden" name="next" value="{{ back_url }}">
            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
            <div class="mb-2">
              <input type="text" name="verification_note" class="form-control form-control-sm"
                     placeholder="Verification note (optional)">
            </div>
            <button type="submit" class="btn btn-sm btn-success">
              <i class="bi bi-patch-check me-1"></i>Verify &amp; Close
            </button>
          </form>
          {% endif %}
        </div>
        {% endif %}
      </div>
    </div>

    {# ── Linked issues ──────────────────────────────────────────────────────
       Duplicates and related issues, so whoever picks this one up can reach the
       others. `issue_links` arrives already filtered to links whose far end this
       viewer may open (_readable_links) — do NOT add links from the model
       directly here, or a customer sees an issue at a facility they have no
       assignment to. Links are navigational only: nothing here changes status,
       SLA, assignee or followers on either issue. #}
    <div class="card shadow-sm mb-4" id="linked-issues-section">
      <div class="card-header bg-light d-flex justify-content-between align-items-center">
        <h6 class="mb-0">
          <i class="bi bi-link-45deg me-1"></i>Linked Issues
          <span class="badge bg-secondary rounded-pill ms-1">{{ issue_links|length }}</span>
        </h6>
        {% if can_manage_links %}
        <button type="button" class="btn btn-sm btn-outline-primary"
                data-bs-toggle="modal" data-bs-target="#linkIssueModal">
          <i class="bi bi-plus-lg me-1"></i>Link an Issue
        </button>
        {% endif %}
      </div>

      <div class="card-body py-2">
        {% if issue_links %}
        <div class="list-group list-group-flush">
          {% for link, other, label in issue_links %}
          <div class="list-group-item px-0 py-2 d-flex align-items-start gap-2 flex-wrap">
            <span class="badge {{ 'bg-warning text-dark' if link.link_type == 'duplicate' else 'bg-info text-dark' }} mt-1"
                  style="min-width:7.5rem;">{{ label }}</span>

            <div class="flex-grow-1" style="min-width:14rem;">
              <a href="{{ url_for('issues.view', issue_id=other.id, next=back_url) }}"
                 class="fw-semibold text-decoration-none">#{{ other.id }}</a>
              <span class="text-muted small ms-1">
                {{ other.area.name if other.area
                   else other.resolved_facility.name if other.resolved_facility else '—' }}
              </span>
              <div class="small text-muted text-truncate" style="max-width:38rem;">
                {{ other.description }}
              </div>
            </div>

            <div class="d-flex align-items-center gap-1 mt-1">
              <span class="badge bg-{{ 'danger' if other.severity in ['critical','high']
                                       else 'warning text-dark' if other.severity == 'medium'
                                       else 'secondary' }}">{{ other.severity|title }}</span>
              <span class="badge bg-{{ 'success' if other.status == 'resolved'
                                       else 'info text-dark' if other.status == 'pending_verification'
                                       else 'light text-dark' }}">
                {{ other.status|replace('_',' ')|title }}
              </span>
              {% if can_manage_links %}
              <form method="POST" class="mb-0 ms-1"
                    action="{{ url_for('issues.remove_link', issue_id=issue.id, link_id=link.id) }}"
                    onsubmit="return confirm('Remove the link between #{{ issue.id }} and #{{ other.id }}? Neither issue is changed or deleted.');">
                <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                <input type="hidden" name="next" value="{{ back_url }}">
                <button type="submit" class="btn btn-sm btn-link text-muted p-0 px-1"
                        title="Remove this link">
                  <i class="bi bi-x-lg"></i>
                </button>
              </form>
              {% endif %}
            </div>
          </div>
          {% endfor %}
        </div>
        {% else %}
        <p class="text-muted small mb-0 py-1">
          <i class="bi bi-info-circle me-1"></i>
          No linked issues.
          {% if can_manage_links %}
          Use <strong>Link an Issue</strong> to point at a duplicate or a related issue.
          {% endif %}
        </p>
        {% endif %}
      </div>
    </div>

    {# ── Comments ───────────────────────────────────────────────────────── #}
    <div class="card shadow-sm mb-4" id="comments-section">
      <div class="card-header bg-light d-flex justify-content-between align-items-center">
        <h6 class="mb-0">
          <i class="bi bi-chat-left-text me-1"></i>Comments
          <span class="badge bg-secondary rounded-pill ms-1">{{ comments|length }}</span>
        </h6>
      </div>

      {# Comment list #}
      {% if comments %}
      <div class="p-3 pb-0" id="comments-list">
        {% set avatar_colors = ['#4f46e5','#0891b2','#059669','#d97706','#dc2626','#7c3aed','#db2777'] %}
        {% for c in comments %}
        {% set avatar_color = avatar_colors[c.author.id % (avatar_colors | length)] %}
        <div class="d-flex gap-3 mb-3">
          <div class="comment-avatar" style="background:{{ avatar_color }};">
            {{ c.author.display_name[0] | upper }}
          </div>
          <div class="comment-bubble">
            <div class="d-flex justify-content-between align-items-start flex-wrap gap-1 mb-1">
              <div class="d-flex align-items-center gap-2">
                <span class="fw-semibold" style="font-size:.9rem;">{{ c.author.display_name }}</span>
                {% if c.author.role == 'customer' %}
                <span class="badge bg-info text-dark" style="font-size:.65rem;">Customer</span>
                {% else %}
                <span class="badge bg-secondary" style="font-size:.65rem;">{{ c.author.role|replace('_',' ')|title }}</span>
                {% endif %}
                {# Visibility indicator — OUR staff only, and only while the
                   per-comment flag still decides anything. While comments_open
                   is set EVERY comment reaches the customer, so a "Staff only"
                   badge would be a lie; it is suppressed rather than shown
                   incorrectly. #}
                {% if viewer_is_our_staff and not comments_open %}
                  {% if c.is_customer_visible %}
                  <span class="badge bg-success bg-opacity-10 text-success border border-success"
                        style="font-size:.6rem;" title="Customer can see this comment">
                    <i class="bi bi-eye me-1"></i>Customer visible
                  </span>
                  {% else %}
                  <span class="badge bg-secondary bg-opacity-10 text-secondary border border-secondary"
                        style="font-size:.6rem;" title="Hidden from customer">
                    <i class="bi bi-eye-slash me-1"></i>Staff only
                  </span>
                  {% endif %}
                {% endif %}
              </div>
              <div class="d-flex align-items-center gap-2">
                <span class="badge bg-{{ 'success' if c.status_at_time == 'resolved' else 'info text-dark' if c.status_at_time == 'pending_verification' else 'warning text-dark' if c.status_at_time == 'in_progress' else 'danger' }}"
                      style="font-size:.65rem;">
                  {{ c.status_at_time|replace('_',' ')|title }}
                </span>
                <small class="text-muted">{{ c.created_at.strftime('%b %d, %Y %H:%M') }}</small>
              </div>
            </div>
            <p class="mb-0" style="white-space:pre-wrap; font-size:.9rem;">{{ c.body }}</p>
          </div>
        </div>
        {% endfor %}
      </div>
      <hr class="mx-3 my-0">
      {% elif current_user.role == 'customer' %}
      <div class="px-3 pt-3 pb-0">
        <p class="text-muted small"><i class="bi bi-chat-left me-1"></i>No comments yet.</p>
      </div>
      <hr class="mx-3 my-0">
      {% endif %}

      {# ── Add Comment form ─────────────────────────────────────────────── #}
      {% set can_customer_comment = current_user.role == 'customer' and (is_following or issue.reported_by == current_user.id) %}

      {% if can_edit %}
      {# Staff comment form with visibility checkbox #}
      <div class="card-body">
        <p class="fw-semibold small mb-2">Add Comment</p>
        <form method="post">
          <input type="hidden" name="next" value="{{ back_url }}">
          <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
          <input type="hidden" name="status" value="{{ issue.status }}">
          <input type="hidden" name="assigned_to" value="{{ issue.assigned_to or 0 }}">
          <div class="mb-2">
            <textarea name="update_notes" class="form-control" rows="3"
                      placeholder="Write a comment…" required></textarea>
          </div>
          {# While comments_open is set, every comment reaches the customer, so
             the "Share with customer" tick decides nothing. Saying so plainly
             matters: a staff member must not write something they believe is
             private. The checkbox is still posted and recorded, so turning the
             setting off restores its meaning immediately.

             OUR STAFF ONLY. `can_edit` is also true for a Customer Inspector
             assigned to the issue, and this banner is an internal-process
             warning ("do not post internal-only notes") — showing it to a
             customer account exposes how we work and reads as nonsense to
             them, since nothing they write was ever private. #}
          {% if comments_open and viewer_is_our_staff %}
          <div class="alert alert-warning py-2 px-3 small mb-2">
            <i class="bi bi-eye me-1"></i>
            <strong>Comments are currently visible to everyone,</strong> including
            the customer, regardless of the tick below. Do not post internal-only
            notes here.
          </div>
          {% endif %}
          <div class="d-flex align-items-center justify-content-between flex-wrap gap-2">
            <div class="form-check form-check-inline mb-0">
              <input class="form-check-input" type="checkbox"
                     name="is_customer_visible" id="is_customer_visible" value="1">
              <label class="form-check-label small text-muted" for="is_customer_visible">
                <i class="bi bi-eye me-1"></i>Share with customer
              </label>
            </div>
            <button type="submit" class="btn btn-primary btn-sm">
              <i class="bi bi-send me-1"></i>Post Comment
            </button>
          </div>
        </form>
      </div>

      {% elif can_customer_comment %}
      {# Customer comment form — visible to all by design #}
      <div class="card-body">
        <p class="fw-semibold small mb-2">Add Comment</p>
        <form method="post">
          <input type="hidden" name="next" value="{{ back_url }}">
          <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
          <div class="mb-2">
            <textarea name="update_notes" class="form-control" rows="3"
                      placeholder="Write a comment…" required></textarea>
          </div>
          <button type="submit" class="btn btn-primary btn-sm">
            <i class="bi bi-send me-1"></i>Post Comment
          </button>
        </form>
      </div>

      {% elif current_user.role == 'customer' %}
      <div class="card-body py-2">
        <p class="text-muted small mb-0">
          <i class="bi bi-bell me-1"></i>Follow this issue to add comments.
        </p>
      </div>

      {% else %}
      <div class="card-body py-2">
        <p class="text-muted small mb-0">
          <i class="bi bi-lock me-1"></i>Only assigned staff can add comments.
        </p>
      </div>
      {% endif %}
    </div>

  </div>{# /col-lg-8 #}

  {# ══════════════════════════════════ RIGHT COLUMN ═════════════════════════════════ #}
  <div class="col-lg-4">

    {# ── Follow / Unfollow ──────────────────────────────────────────────── #}
    <div class="card shadow-sm mb-3">
      <div class="card-body d-flex align-items-center justify-content-between py-2">
        <div>
          <i class="bi bi-bell{{ '-fill text-primary' if is_following else ' text-muted' }} me-1"></i>
          <span class="fw-semibold" style="font-size:.9rem;">
            {% if is_following %}Following{% else %}Not following{% endif %}
          </span>
          <span class="text-muted ms-2" style="font-size:.8rem;">
            {{ issue.followers.count() }} follower{{ 's' if issue.followers.count() != 1 else '' }}
          </span>
        </div>
        {% if is_following %}
        <form method="post" action="{{ url_for('issues.unfollow', issue_id=issue.id) }}" class="mb-0">
          <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
          <button type="submit" class="btn btn-outline-secondary btn-sm">
            <i class="bi bi-bell-slash"></i> Unfollow
          </button>
        </form>
        {% else %}
        <form method="post" action="{{ url_for('issues.follow', issue_id=issue.id) }}" class="mb-0">
          <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
          <button type="submit" class="btn btn-outline-primary btn-sm">
            <i class="bi bi-bell"></i> Follow
          </button>
        </form>
        {% endif %}
      </div>
    </div>

    {# ── Update Form ────────────────────────────────────────────────────── #}
    {% if can_edit %}
    <div class="card shadow-sm">
      <div class="card-header bg-light"><h6 class="mb-0">Update Issue</h6></div>
      <div class="card-body">
        <form method="post" enctype="multipart/form-data">
          <input type="hidden" name="next" value="{{ back_url }}">
          <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
          <div class="mb-3">
            {{ form.status.label(class="form-label fw-semibold") }}
            {{ form.status(class="form-select") }}
          </div>
          {% if current_user.role in ['admin','director','auditor'] %}
          <div class="mb-3">
            {{ form.assigned_to.label(class="form-label fw-semibold") }}
            {{ form.assigned_to(class="form-select") }}
          </div>
          {% endif %}
          <div class="mb-3">
            {{ form.result_notes.label(class="form-label fw-semibold") }}
            {{ form.result_notes(class="form-control", rows=3,
               placeholder="Describe what was done to resolve this issue…",
               value=issue.result_notes or '') }}
          </div>
          <div class="mb-3">
            <label class="form-label fw-semibold">Result Photos</label>
            <input type="file" name="result_photos" id="result_photos"
                   class="form-control" accept="image/*" multiple>
            <div class="form-text">Attach one or more photos showing the resolution.</div>
            {% if issue.result_photos %}
            <div class="mt-2">
              <small class="text-muted">{{ issue.result_photos|length }} photo(s) already uploaded</small>
            </div>
            {% endif %}
          </div>
          {% if current_user.role in ['admin','director','project_manager','auditor'] %}
          <hr class="my-3">
          <p class="fw-semibold small mb-2">
            <i class="bi bi-person-check me-1 text-secondary"></i>Handler / Ownership
          </p>
          <div class="mb-3">
            {{ form.handler_type.label(class="form-label small fw-semibold mb-1") }}
            {{ form.handler_type(class="form-select form-select-sm",
               id="handlerTypeSelect") }}
          </div>
          <div id="facilityHandlerFields"
               style="{{ '' if issue.handler_type == 'facility' else 'display:none;' }}">
            <div class="mb-2">
              {{ form.facility_handler_name.label(class="form-label small fw-semibold mb-1") }}
              {{ form.facility_handler_name(class="form-control form-control-sm",
                 placeholder="Contact name at the facility",
                 value=issue.facility_handler_name or '') }}
            </div>
            <div class="mb-2">
              {{ form.facility_handler_contact.label(class="form-label small fw-semibold mb-1") }}
              {{ form.facility_handler_contact(class="form-control form-control-sm",
                 placeholder="Phone or email",
                 value=issue.facility_handler_contact or '') }}
            </div>
            <div class="mb-3">
              {{ form.facility_handler_notes.label(class="form-label small fw-semibold mb-1") }}
              {{ form.facility_handler_notes(class="form-control form-control-sm", rows=2,
                 placeholder="Notes about what they are handling…") }}
            </div>
          </div>
          <div id="internalHandlerFields"
               style="{{ '' if (issue.handler_type or 'internal') == 'internal' else 'display:none;' }}">
            <div class="mb-2">
              {{ form.internal_handler_name.label(class="form-label small fw-semibold mb-1") }}
              {{ form.internal_handler_name(class="form-control form-control-sm",
                 placeholder="Crew member handling this",
                 value=issue.internal_handler_name or '') }}
            </div>
            <div class="mb-3">
              {{ form.internal_handler_contact.label(class="form-label small fw-semibold mb-1") }}
              {{ form.internal_handler_contact(class="form-control form-control-sm",
                 placeholder="Phone or email",
                 value=issue.internal_handler_contact or '') }}
            </div>
          </div>
          <script>
          (function(){
            var sel = document.getElementById('handlerTypeSelect');
            var box = document.getElementById('facilityHandlerFields');
            var inv = document.getElementById('internalHandlerFields');
            if(sel){
              sel.addEventListener('change', function(){
                if(box){ box.style.display = (this.value === 'facility') ? '' : 'none'; }
                if(inv){ inv.style.display = (this.value === 'internal') ? '' : 'none'; }
              });
            }
          })();
          </script>
          <hr class="my-3">
          <p class="fw-semibold small mb-2">
            <i class="bi bi-person-gear me-1 text-secondary"></i>External Contractor
          </p>
          <div class="mb-2">
            {{ form.vendor_name.label(class="form-label small fw-semibold mb-1") }}
            {{ form.vendor_name(class="form-control form-control-sm",
               placeholder="Contractor or vendor name",
               value=issue.vendor_name or '') }}
          </div>
          <div class="mb-2">
            {{ form.vendor_contact.label(class="form-label small fw-semibold mb-1") }}
            {{ form.vendor_contact(class="form-control form-control-sm",
               placeholder="Phone or email",
               value=issue.vendor_contact or '') }}
          </div>
          <div class="mb-3">
            {{ form.vendor_notes.label(class="form-label small fw-semibold mb-1") }}
            {{ form.vendor_notes(class="form-control form-control-sm", rows=2,
               placeholder="Notes about what the contractor is handling…") }}
          </div>
          {% endif %}
          <button type="submit" class="btn btn-primary w-100">Save Update</button>
        </form>
        {% if issue.status in ['in_progress', 'resolved'] and current_user.role not in ['customer'] %}
        <form method="POST"
              action="{{ url_for('issues.request_verification', issue_id=issue.id) }}"
              class="mt-2">
          <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
          <button type="submit" class="btn btn-outline-info w-100"
                  onclick="return confirm('Mark this issue as pending director verification?')">
            <i class="bi bi-hourglass-split me-1"></i> Request Verification
          </button>
        </form>
        {% endif %}
      </div>
    </div>
    {% endif %}


  </div>{# /col-lg-4 #}
</div>

<div class="d-flex align-items-center gap-2 mt-2">
  <a href="{{ back_url }}" class="btn btn-outline-secondary btn-sm">
    <i class="bi bi-arrow-left"></i> Back to Issues
  </a>
  <a href="{{ url_for('issues.export_pdf', issue_id=issue.id) }}" class="btn btn-outline-primary btn-sm">
    <i class="bi bi-file-earmark-pdf"></i> Export PDF
  </a>
  {% if current_user.role in ['admin', 'director'] %}
  <button type="button" class="btn btn-outline-danger btn-sm"
          data-bs-toggle="modal" data-bs-target="#deleteIssueModal">
    <i class="bi bi-trash"></i> Delete Issue
  </button>
  {% endif %}
</div>

{# ── Link an issue ────────────────────────────────────────────────────────────
   Search is scoped server-side to issues this viewer could already open, so the
   picker can never be used to enumerate another contract's issues. The POST
   re-checks access — the search is only a convenience. #}
{% if can_manage_links %}
<div class="modal fade" id="linkIssueModal" tabindex="-1"
     aria-labelledby="linkIssueModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <form method="POST" action="{{ url_for('issues.add_link', issue_id=issue.id) }}">
        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
        <input type="hidden" name="next" value="{{ back_url }}">

        <div class="modal-header">
          <h5 class="modal-title" id="linkIssueModalLabel">
            <i class="bi bi-link-45deg me-1"></i>Link an issue to #{{ issue.id }}
          </h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>

        <div class="modal-body">
          <div class="mb-3">
            <label class="form-label small fw-semibold" for="linkTypeSelect">
              How are they related?
            </label>
            <select name="link_type" id="linkTypeSelect" class="form-select form-select-sm">
              {% for value, label in link_types %}
              <option value="{{ value }}">
                #{{ issue.id }} is a <strong>{{ label|lower }}</strong> …
              </option>
              {% endfor %}
            </select>
            <div class="form-text">
              Linking is for navigation only — neither issue's status, SLA or
              assignee changes.
            </div>
          </div>

          <div class="mb-2">
            <label class="form-label small fw-semibold" for="linkIssueSearch">
              Which issue?
            </label>
            <input type="text" class="form-control form-control-sm" id="linkIssueSearch"
                   autocomplete="off" placeholder="Issue number, or words from the description…">
            <input type="hidden" name="linked_issue_id" id="linkIssueId">
          </div>

          {# Chosen issue, shown once picked so nobody submits a mistyped number #}
          <div id="linkIssueChosen" class="alert alert-primary py-2 small d-none mb-2">
            <span id="linkIssueChosenText"></span>
            <button type="button" class="btn btn-sm btn-link p-0 ms-2" id="linkIssueClear">change</button>
          </div>

          <div id="linkIssueResults" class="list-group small" style="max-height:16rem; overflow-y:auto;"></div>
          <div id="linkIssueEmpty" class="text-muted small d-none py-2">
            No matching issue you can access.
          </div>
        </div>

        <div class="modal-footer">
          <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Cancel</button>
          <button type="submit" class="btn btn-primary btn-sm" id="linkIssueSubmit" disabled>
            <i class="bi bi-link-45deg me-1"></i>Link Issue
          </button>
        </div>
      </form>
    </div>
  </div>
</div>
{% endif %}

{% if current_user.role in ['admin', 'director'] %}
<div class="modal fade" id="deleteIssueModal" tabindex="-1" aria-labelledby="deleteIssueModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header bg-danger text-white">
        <h5 class="modal-title" id="deleteIssueModalLabel">
          <i class="bi bi-exclamation-triangle-fill"></i> Confirm Deletion
        </h5>
        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        <p>You are about to permanently delete:</p>
        <p class="fw-bold">Issue #{{ issue.id }} — {{ issue.severity|title }} severity in {{ issue.area.name if issue.area else '—' }}</p>
        <div class="alert alert-warning mb-0">
          <i class="bi bi-exclamation-triangle-fill"></i>
          This action is <strong>irreversible</strong>. All comments, photos, and
          follower records associated with this issue will also be deleted.
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
          <i class="bi bi-x-circle"></i> Cancel
        </button>
        <form method="POST" action="{{ url_for('issues.delete', issue_id=issue.id) }}" class="d-inline">
          <input type="hidden" name="next" value="{{ back_url }}">
          <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
          <button type="submit" class="btn btn-danger">
            <i class="bi bi-trash-fill"></i> Delete Permanently
          </button>
        </form>
      </div>
    </div>
  </div>
</div>
{% endif %}

{% block extra_js %}
<script>
(function () {
    'use strict';

    // Refresh bell badge after a successful update
    if (document.querySelector('.alert-success')) {
        if (typeof fetchNotifications === 'function') {
            fetchNotifications();
        }
    }

    // Scroll to bottom of comments list after posting a comment
    if (document.querySelector('.alert-success')) {
        var section = document.getElementById('comments-section');
        if (section) {
            section.scrollIntoView({ behavior: 'smooth', block: 'start' });
        }
    }
    // ── Link-an-issue picker ────────────────────────────────────────────────
    // Type a number or some words, pick from the scoped results, submit. The
    // hidden linked_issue_id is only ever set by CHOOSING a result, so the
    // number posted is always one the server just confirmed this user can see.
    //
    // Every result field is written with textContent / createTextNode, never
    // innerHTML: `description` is text a person typed and would otherwise be
    // an XSS hole straight into the page of whoever opens the picker.
    var linkSearch = document.getElementById('linkIssueSearch');
    if (linkSearch) {
        var linkResults    = document.getElementById('linkIssueResults');
        var linkEmpty      = document.getElementById('linkIssueEmpty');
        var linkIdField    = document.getElementById('linkIssueId');
        var linkChosen     = document.getElementById('linkIssueChosen');
        var linkChosenText = document.getElementById('linkIssueChosenText');
        var linkClear      = document.getElementById('linkIssueClear');
        var linkSubmit     = document.getElementById('linkIssueSubmit');
        var searchTimer    = null;
        var searchSeq      = 0;

        function clearChoice() {
            linkIdField.value = '';
            linkSubmit.disabled = true;
            linkChosen.classList.add('d-none');
            linkSearch.classList.remove('d-none');
        }

        function choose(item) {
            linkIdField.value = item.id;
            linkSubmit.disabled = false;
            linkChosenText.textContent =
                '#' + item.id + ' — ' + item.location + ' — ' + item.description;
            linkChosen.classList.remove('d-none');
            linkSearch.classList.add('d-none');
            linkResults.innerHTML = '';
            linkEmpty.classList.add('d-none');
        }

        function renderResults(items) {
            linkResults.innerHTML = '';
            linkEmpty.classList.toggle('d-none', items.length > 0);

            items.forEach(function (item) {
                var row = document.createElement('button');
                row.type = 'button';
                row.className = 'list-group-item list-group-item-action py-2';

                var head = document.createElement('div');
                head.className = 'd-flex justify-content-between gap-2';

                var num = document.createElement('span');
                num.className = 'fw-semibold';
                num.textContent = '#' + item.id + ' · ' + item.location;

                var meta = document.createElement('span');
                meta.className = 'text-muted';
                meta.textContent = item.severity + ' · ' + item.status +
                                   (item.reported_at ? ' · ' + item.reported_at : '');

                head.appendChild(num);
                head.appendChild(meta);

                var desc = document.createElement('div');
                desc.className = 'text-muted text-truncate';
                desc.textContent = item.description;

                row.appendChild(head);
                row.appendChild(desc);
                row.addEventListener('click', function () { choose(item); });
                linkResults.appendChild(row);
            });
        }

        function runSearch() {
            var term = linkSearch.value.trim();
            if (!term) {
                linkResults.innerHTML = '';
                linkEmpty.classList.add('d-none');
                return;
            }
            // Responses can arrive out of order; only the newest one may render.
            var seq = ++searchSeq;
            fetch('{{ url_for("issues.link_search", issue_id=issue.id) }}?q=' +
                  encodeURIComponent(term), { headers: { 'Accept': 'application/json' } })
                .then(function (res) { return res.ok ? res.json() : { results: [] }; })
                .then(function (data) {
                    if (seq !== searchSeq) { return; }
                    renderResults(data.results || []);
                })
                .catch(function () {
                    if (seq !== searchSeq) { return; }
                    renderResults([]);
                });
        }

        linkSearch.addEventListener('input', function () {
            clearTimeout(searchTimer);
            searchTimer = setTimeout(runSearch, 250);
        });
        // The picker lives inside a form — Enter would submit it with no issue
        // chosen instead of searching.
        linkSearch.addEventListener('keydown', function (ev) {
            if (ev.key === 'Enter') {
                ev.preventDefault();
                clearTimeout(searchTimer);
                runSearch();
            }
        });
        linkClear.addEventListener('click', function () {
            clearChoice();
            linkSearch.value = '';
            linkSearch.focus();
        });
    }


})();
</script>
{% endblock %}
{% endblock %}