{% extends "op_zz_frame.html" %}
{% block centercontent %}
<main class="ct-docs-content-col" role="main">
  <div style="width:100%">
    <h1 class="ct-docs-page-h1-title" id="content">
      {{ _('Virtual Charging Station') }}
    </h1>
    <p>{{ _('Simulator status') }}: {% if sim_running %}<span style="color:green">{{ _('running') }}</span>{% else %}<span style="color:red">{{ _('stopped') }}</span>{% endif %}</p>
  </div>

  <form method="post">
    {% for st in stations %}
    <fieldset style="margin-bottom:20px;">
      <legend>{{ st.id }}</legend>
      <label>
        {{ _('Active') }}:
        <input type="checkbox" name="{{ st.id }}_enabled" {% if st.enabled %}checked{% endif %}>
      </label><br>
      <label>{{ _('Name') }}:
        <input type="text" name="{{ st.id }}_name" value="{{ st.name }}">
      </label><br>
      <label>{{ _('Backend URL') }}:
        <input type="text" name="{{ st.id }}_backend_url" value="{{ st.backend_url }}">
      </label><br>
      <label>{{ _('Charge Point ID') }}:
        <input type="text" name="{{ st.id }}_cp_id" value="{{ st.cp_id }}">
      </label><br>
      <label>{{ _('ID Tag {number}', number=1) }}:
        <input type="text" name="{{ st.id }}_idtag1" value="{{ st.idtags[0] }}">
        <button type="button" onclick="startCharge('{{ st.id }}', '{{ st.id }}_idtag1')">{{ _('Start') }}</button>
      </label><br>
      <label>{{ _('ID Tag {number}', number=2) }}:
        <input type="text" name="{{ st.id }}_idtag2" value="{{ st.idtags[1] }}">
        <button type="button" onclick="startCharge('{{ st.id }}', '{{ st.id }}_idtag2')">{{ _('Start') }}</button>
      </label><br>
      <label>{{ _('ID Tag {number}', number=3) }}:
        <input type="text" name="{{ st.id }}_idtag3" value="{{ st.idtags[2] }}">
        <button type="button" onclick="startCharge('{{ st.id }}', '{{ st.id }}_idtag3')">{{ _('Start') }}</button>
      </label><br>
      <p>{{ _('Meter reading') }}: {{ st.meter }}</p>
    </fieldset>
    {% endfor %}
    <button type="submit" class="pipelet-btn">{{ _('Save') }}</button>
  </form>
  <script>
  function startCharge(stationId, fieldName) {
    const idTag = document.getElementsByName(fieldName)[0].value;
    fetch('/api/virtualcharger/start', {
      method: 'POST',
      headers: {'Content-Type': 'application/json'},
      body: JSON.stringify({station_id: stationId, id_tag: idTag})
    }).then(r => r.json()).then(data => {
      alert(data.status || data.error);
    });
  }
  </script>
</main>
{% endblock %}