{% extends "base.html" %}
{% block content %}
<section class="card">
  <h2>Run Diagnosis</h2>
  <form hx-post="/diagnose" hx-target="#result" hx-swap="innerHTML"
        hx-on::before-request="if(event.detail.elt===this) showDiagnosing()"
        hx-on::after-request="if(event.detail.elt===this) resetBtn()">

    <div class="field-row">
      <div class="field">
        <label for="region">AWS Region</label>
        <input id="region" name="region" type="text" value="us-east-1"
               hx-get="/api/clusters-options"
               hx-trigger="change delay:400ms"
               hx-target="#cluster"
               hx-swap="innerHTML"
               hx-include="this,[name='profile']"
               hx-on::after-swap="document.getElementById('service').innerHTML='<option value=&quot;&quot; disabled selected>Select a cluster first</option>'">
      </div>
      <div class="field">
        <label for="profile">AWS Profile</label>
        <select id="profile" name="profile"
                hx-get="/api/clusters-options"
                hx-trigger="change, load delay:100ms"
                hx-target="#cluster"
                hx-swap="innerHTML"
                hx-include="[name='region'],this"
                hx-on::after-swap="document.getElementById('service').innerHTML='<option value=&quot;&quot; disabled selected>Select a cluster first</option>'">
          <option value="">Default credentials</option>
          {% for p in profiles %}
          <option value="{{ p }}">{{ p }}</option>
          {% endfor %}
        </select>
      </div>
    </div>

    <div class="field">
      <label for="cluster">ECS Cluster</label>
      <select id="cluster" name="cluster" required
              hx-get="/api/services-options"
              hx-trigger="change"
              hx-target="#service"
              hx-swap="innerHTML"
              hx-include="[name='region'],[name='profile']">
        <option value="" disabled selected>Loading clusters…</option>
      </select>
    </div>

    <div class="field">
      <label for="service">ECS Service</label>
      <select id="service" name="service" required>
        <option value="" disabled selected>Select a cluster first</option>
      </select>
    </div>

    <button type="submit" id="diagnose-btn">Diagnose</button>
  </form>
</section>

<section id="result"></section>

<script>
function showDiagnosing() {
  var btn = document.getElementById('diagnose-btn');
  btn.disabled = true;
  btn.textContent = 'Diagnosing…';
  document.getElementById('result').innerHTML =
    '<div class="card loading-card">' +
      '<div class="loading-spinner"></div>' +
      '<h3>Diagnosing your ECS service…</h3>' +
      '<p class="dim">Checking ECS events, stopped task reasons, CloudWatch logs, and ALB health.</p>' +
      '<p class="dim">This usually takes 10–30 seconds.</p>' +
    '</div>';
}
function resetBtn() {
  var btn = document.getElementById('diagnose-btn');
  btn.disabled = false;
  btn.textContent = 'Diagnose';
}
</script>

{% endblock %}