{% extends "pages/base.html" %}
{% load static %}

{% block title %}OCPP Simulator{% endblock %}

{% block extra_head %}
<link rel="stylesheet" href="{% static 'ocpp/evcs/cp_simulator.css' %}">
{% endblock %}

{% block extra_scripts %}
<script src="{% static 'htmx/htmx.min.js' %}" defer></script>
{% endblock %}

{% block content %}
<div class="simulator-page-header">
  <h1 class="mb-0">OCPP Simulator</h1>
  <form method="post" class="simulator-backend-form">
    {% csrf_token %}
    <input type="hidden" name="action" value="select-backend">
    <input type="hidden" name="simulator_slot" value="{{ simulator_slot }}">
    <label for="simulator-backend-select">Simulator backend</label>
    <select id="simulator-backend-select" name="simulator_backend" onchange="this.form.submit()" {% if not backends_available %}disabled{% endif %}>
      {% for value, label in backend_choices %}
      <option value="{{ value }}" {% if value == selected_backend %}selected{% endif %}>{{ label }}</option>
      {% endfor %}
    </select>
    <noscript>
      <button type="submit" class="btn btn-sm btn-outline-secondary">Apply</button>
    </noscript>
    {% if not backends_available %}<small class="text-warning ms-2">No simulator backends are enabled.</small>{% endif %}
  </form>
</div>
<div class="mt-3"
     hx-get="{% url 'ocpp:cp-simulator' %}"
     hx-trigger="load, every 5s"
     hx-target="#cp-simulator-panel"
     hx-swap="outerHTML">
  {% include "ocpp/includes/cp_simulator_panel.html" %}
</div>
{% endblock %}