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

{% block content %}
<div class="d-flex align-items-center justify-content-between mb-3">
  <h2 class="mb-0">Remark</h2>
  <a class="btn btn-outline-secondary" href="{{ url_for('main.tickets_page', tab='remarks') }}">Back</a>
</div>

<div class="card mb-3">
  <div class="card-body">
    <div class="mb-2">
      <span class="me-2">{% if remark.resolved_at %}✅ Resolved{% else %}💬 Active{% endif %}</span>
      <span class="text-muted">Start: {{ remark.start_date.strftime('%d-%m-%Y %H:%M:%S') if remark.start_date else '-' }}</span>
      {% if remark.resolved_at %}
        <span class="text-muted ms-2">Resolved: {{ remark.resolved_at.strftime('%d-%m-%Y %H:%M:%S') }}</span>
      {% endif %}
    </div>

    <div class="row g-3">      <div class="col-12">
        <label class="form-label">Body</label>
        <div class="form-control-plaintext border rounded p-2" style="min-height: 7rem; white-space: pre-wrap;">{{ remark.body or '' }}</div>
      </div>
      {% if active_role in ['admin','operator'] %}
      <div class="col-12">
        
        {% if not remark.resolved_at %}
          <button class="btn btn-outline-success" type="button" onclick="if(confirm('Mark remark as resolved?')){fetch('{{ url_for('main.api_remark_resolve', remark_id=remark.id) }}',{method:'POST'}).then(()=>location.reload());}">Resolve</button>
        {% endif %}
      </div>
      {% endif %}
    </div>
  </div>
</div>

<div class="row g-3">
  <div class="col-lg-6">
    <div class="card h-100">
      <div class="card-body">
        <h5 class="card-title">Scopes</h5>
        {% if scopes %}
          <ul class="list-group list-group-flush">
            {% for s in scopes %}
              <li class="list-group-item small">
                <div><strong>Type:</strong> {{ s.scope_type }}</div>
                <div><strong>Customer:</strong> {{ s.customer_id or '-' }}</div>
                <div><strong>Backup:</strong> {{ s.backup_software or '-' }}</div>
                <div><strong>Type:</strong> {{ s.backup_type or '-' }}</div>
                <div><strong>Job:</strong> {{ s.job_id or '-' }}</div>
                <div><strong>Job run:</strong> {{ s.job_run_id or '-' }}</div>
                <div><strong>Job name match:</strong> {{ s.job_name_match or '-' }}</div>
              </li>
            {% endfor %}
          </ul>
        {% else %}
          <div class="text-muted">No scopes.</div>
        {% endif %}
      </div>
    </div>
  </div>

  <div class="col-lg-6">
    <div class="card h-100">
      <div class="card-body">
        <h5 class="card-title">Linked runs (last 20)</h5>
        {% if runs %}
          <div class="table-responsive">
            <table class="table table-sm align-middle">
              <thead class="table-light">
                <tr>
                  <th>Run at</th>
                  <th>Customer</th>
                  <th>Job</th>
                  <th>Status</th>
                </tr>
              </thead>
              <tbody>
                {% for r in runs %}
                  <tr>
                    <td class="text-nowrap">{{ r.run_at|local_datetime }}</td>
                    <td>{{ r.customer_name }}</td>
                    <td>{{ r.job_name }}</td>
                    <td>{{ r.status }}</td>
                  </tr>
                {% endfor %}
              </tbody>
            </table>
          </div>
        {% else %}
          <div class="text-muted">No linked runs.</div>
        {% endif %}
      </div>
    </div>
  </div>
</div>

{% endblock %}