{% load i18n %}

<div
  id="charger-simulator-panel"
  class="landing-action-secondary d-grid gap-2 text-start mt-2"
  hx-get="{{ simulator_refresh_url }}"
  {% if simulator_state.running %}
  hx-trigger="every 5s"
  {% endif %}
  hx-target="this"
  hx-swap="outerHTML"
>
  <p class="landing-section-heading mb-0">{% trans "Simulator" %}</p>
  {% if simulator_feedback %}
  <div class="alert alert-{{ simulator_feedback_level|default:'info' }} py-2 px-3 mb-0" role="status">
    {{ simulator_feedback }}
  </div>
  {% endif %}

  {% if simulator_unsupported_reason %}
  <button type="button" class="btn btn-outline-secondary w-100" disabled>
    {% trans "Simulator unavailable" %}
  </button>
  <p class="small text-muted mb-0">{{ simulator_unsupported_reason }}</p>
  {% else %}
  <form
    method="post"
    action="{{ simulator_action_url }}"
    class="d-grid gap-2"
    data-simulator-action-form
    hx-post="{{ simulator_action_url }}"
    hx-target="#charger-simulator-panel"
    hx-swap="outerHTML"
  >
    {% csrf_token %}
    <div
      class="row g-2"
      hx-get="{{ simulator_refresh_base_url }}"
      hx-trigger="change from:#public-simulator-connector, change from:#public-simulator-slot"
      hx-target="#charger-simulator-panel"
      hx-swap="outerHTML"
      hx-include="closest form"
    >
      <div class="col-7">
        <label class="form-label small text-muted mb-1" for="public-simulator-connector">{% trans "Connector" %}</label>
        <select
          id="public-simulator-connector"
          name="simulator_connector_id"
          class="form-select form-select-sm"
        >
          {% if not simulator_connector_options %}
          <option value="{{ simulator_connector_id }}">{% blocktrans with connector=simulator_connector_id %}Connector {{ connector }}{% endblocktrans %}</option>
          {% endif %}
          {% for option in simulator_connector_options %}
          <option value="{{ option.value }}"{% if option.value == simulator_connector_id %} selected{% endif %}>{{ option.label }}</option>
          {% endfor %}
        </select>
      </div>
      <div class="col-5">
        <label class="form-label small text-muted mb-1" for="public-simulator-slot">{% trans "Slot" %}</label>
        <select
          id="public-simulator-slot"
          name="simulator_slot"
          class="form-select form-select-sm"
        >
          <option value="1"{% if simulator_slot == 1 %} selected{% endif %}>1</option>
          <option value="2"{% if simulator_slot == 2 %} selected{% endif %}>2</option>
        </select>
      </div>
    </div>
    <div>
      <label class="form-label small text-muted mb-1" for="public-simulator-rfid">{% trans "RFID" %}</label>
      <div class="input-group input-group-sm">
        <input
          id="public-simulator-rfid"
          name="rfid"
          value="{{ simulator_rfid }}"
          class="form-control"
          autocomplete="off"
          data-simulator-rfid-input
        >
        {% if rfid_scanner_available and rfid_scan_url %}
        <button
          class="btn btn-outline-secondary"
          type="button"
          data-simulator-rfid-scan
          data-scan-url="{{ rfid_scan_url }}"
          data-waiting-text="{% trans "Waiting" %}"
          data-waiting-status="{% trans "Waiting for card" %}"
          data-scanned-status="{% trans "Card scanned" %}"
          data-timeout-status="{% trans "No card scanned" %}"
          data-error-status="{% trans "Scanner unavailable" %}"
        >
          {% trans "Scan" %}
        </button>
        {% endif %}
      </div>
      {% if rfid_scanner_available and rfid_scan_url %}
      <div class="small text-muted mt-1" data-simulator-rfid-status></div>
      {% endif %}
    </div>
    <div class="btn-group w-100" role="group" aria-label="{% trans "Simulator controls" %}">
      <button
        type="submit"
        name="action"
        value="start-simulator"
        class="btn btn-outline-primary"
        {% if simulator_state.running %}disabled{% endif %}
      >
        {% trans "Start" %}
      </button>
      <button
        type="submit"
        name="action"
        value="stop-simulator"
        class="btn btn-outline-secondary"
        {% if not simulator_state.running %}disabled{% endif %}
      >
        {% trans "Stop" %}
      </button>
    </div>
  </form>

  <div class="border rounded p-2 bg-body-tertiary">
    <div class="d-flex justify-content-between gap-2">
      <span class="fw-semibold">{% if simulator_state.running %}{% trans "Running" %}{% else %}{% trans "Stopped" %}{% endif %}</span>
      <span class="text-muted">{{ simulator_state.phase|default:"-" }}</span>
    </div>
    <div class="small text-muted text-break">{{ simulator_state.last_status|default:"-" }}</div>
    <div class="small text-muted text-break">{{ simulator_target_ws_url|default:"-" }}</div>
  </div>

  <div class="d-grid gap-1">
    {% for step in simulator_steps %}
    <div class="d-flex align-items-center justify-content-between gap-2 small">
      <span>{{ step.label }}</span>
      <span class="badge {% if step.state == 'done' %}text-bg-success{% elif step.state == 'active' %}text-bg-primary{% else %}text-bg-secondary{% endif %}">
        {{ step.detail|default:step.state }}
      </span>
    </div>
    {% endfor %}
  </div>

  {% if simulator_profile %}
  <p class="text-muted small mb-0 text-break">{{ simulator_profile.display_label }} - {{ simulator_profile.cp_path }}</p>
  {% endif %}
  {% endif %}
</div>