{% extends "base.html" %}
{% block title %}SLA Policies // Synapse-Cortex{% endblock %}
{% block header %}Tenant SLA Configuration{% endblock %}
{% block content %}
<div class="text-xs text-cortex-muted uppercase tracking-wider mb-4">Resolution &amp; response targets by priority</div>

<div class="border border-cortex-border bg-cortex-panel rounded-md">
  <table class="w-full text-sm">
    <thead>
      <tr class="text-left text-[10px] text-cortex-muted uppercase tracking-wider border-b border-cortex-border">
        <th class="px-4 py-2">Priority</th>
        <th class="px-4 py-2">Response Time (min)</th>
        <th class="px-4 py-2">Resolution Time (min)</th>
        <th class="px-4 py-2"></th>
      </tr>
    </thead>
    <tbody>
      {% for p in policies %}
      <tr class="border-b border-cortex-border/60 hover:bg-cortex-panel2" data-policy-id="{{ p.id }}">
        <td class="px-4 py-2">
          <span class="text-[10px] px-2 py-0.5 rounded uppercase
            {% if p.priority.value == 'critical' %}bg-accent-red/15 text-accent-red border border-accent-red/30
            {% elif p.priority.value == 'high' %}bg-accent-orange/15 text-accent-orange border border-accent-orange/30
            {% elif p.priority.value == 'medium' %}bg-accent-blue/15 text-accent-blue border border-accent-blue/30
            {% else %}bg-cortex-panel2 text-cortex-muted border border-cortex-border{% endif %}">
            {{ p.priority.value }}
          </span>
        </td>
        <td class="px-4 py-2">
          <input type="number" min="1" value="{{ p.response_time_minutes }}" class="response-input w-28 bg-cortex-panel2 border border-cortex-border rounded px-2 py-1 focus:outline-none focus:border-accent-blue" />
        </td>
        <td class="px-4 py-2">
          <input type="number" min="1" value="{{ p.resolution_time_minutes }}" class="resolution-input w-28 bg-cortex-panel2 border border-cortex-border rounded px-2 py-1 focus:outline-none focus:border-accent-blue" />
        </td>
        <td class="px-4 py-2">
          <button class="save-policy-btn text-[10px] uppercase text-accent-blue hover:text-white border border-accent-blue/40 rounded px-2 py-1">Save</button>
        </td>
      </tr>
      {% else %}
      <tr><td colspan="4" class="px-4 py-6 text-center text-cortex-muted text-xs">No SLA policies configured.</td></tr>
      {% endfor %}
    </tbody>
  </table>
</div>

<script>
  document.querySelectorAll('.save-policy-btn').forEach(function (btn) {
    btn.addEventListener('click', async function () {
      const row = btn.closest('tr');
      const policyId = row.getAttribute('data-policy-id');
      const response_time_minutes = parseInt(row.querySelector('.response-input').value, 10);
      const resolution_time_minutes = parseInt(row.querySelector('.resolution-input').value, 10);

      const res = await fetch('/api/v1/sla-policies/' + policyId, {
        method: 'PATCH',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ response_time_minutes, resolution_time_minutes }),
      });

      btn.textContent = res.ok ? 'Saved' : 'Error';
      setTimeout(function () { btn.textContent = 'Save'; }, 1500);
    });
  });
</script>
{% endblock %}