{% extends "op_zz_frame.html" %}
{% block centercontent %}
<main class="ct-docs-content-col" role="main">
  <div class="w-100 mb-4">
    <h1 class="ct-docs-page-h1-title" id="content">
      {{ _('Edit wallbox') }}
    </h1>
    <p class="text-muted mb-0">{{ _('Configure routing, authentication, and optional monitoring in the sections below.') }}</p>
  </div>


<form method="post" action="{{ url_for('edit') }}" class="d-flex flex-column gap-4">
  <input type="hidden" name="orig_source_url" value="{{ row.source_url|e }}">

  <div class="card shadow-sm">
    <div class="card-header bg-transparent border-bottom-0 pb-0">
      <h2 class="h6 text-body fw-bold mb-0">{{ _('Basic data') }}</h2>
      <p class="text-muted small mb-0">{{ _('Define the source address and optionally choose a predefined forwarding target.') }}</p>
    </div>
    <div class="card-body pt-3">
      <div class="row g-3">
        <div class="col-md-6">
          <label class="form-label" for="source_url_input">{{ _('Source URL') }}</label>
          <input type="text" id="source_url_input" name="source_url" value="{{ row.source_url|e }}" class="form-control">
        </div>
        <div class="col-md-6">
          <label class="form-label" for="target_base_select">{{ _('Predefined route') }}</label>
          <select name="target_base" id="target_base_select" class="form-select">
            <option value="">{{ _('— manual entry —') }}</option>
            {% for t in targets %}
              <option value="{{ t.base }}" {% if row.ws_url.startswith(t.base + '/') %}selected{% endif %}>{{ t.short_name }}</option>
            {% endfor %}
          </select>
        </div>
        <div class="col-12">
          <label class="form-label" for="ws_url_input">{{ _('Target WS URL') }}</label>
          <input type="text" id="ws_url_input" name="ws_url" value="{{ row.ws_url|e }}" class="form-control">
          <div class="form-text">{{ _('The WebSocket address is completed automatically when a route is selected.') }}</div>
        </div>
        <div class="col-12">
          <label class="form-label" for="comment_input">{{ _('Comment') }}</label>
          <input type="text" id="comment_input" name="comment" value="{{ row.comment|e }}" class="form-control" maxlength="200">
        </div>
        <div class="col-12">
          <label class="form-label" for="public_evse_id_input">{{ _('Public EVSE ID') }}</label>
          <input type="text" id="public_evse_id_input" name="public_evse_id" value="{{ row.public_evse_id|e }}" class="form-control" maxlength="255" placeholder="DE*WLE*E0000001">
          <div class="form-text">{{ _('Unique ID for the public EVSE entry (one per wallbox).') }}</div>
        </div>
      </div>
    </div>
  </div>

  <div class="card shadow-sm">
    <div class="card-header bg-transparent border-bottom-0 pb-0">
      <h2 class="h6 text-body fw-bold mb-0">{{ _('Tenant assignment') }}</h2>
      <p class="text-muted small mb-0">{{ _('Optionally assign the wallbox to a tenant. Without selection it remains with the admin tenant.') }}</p>
    </div>
    <div class="card-body pt-3">
      <div class="row g-3">
        <div class="col-md-6 col-lg-4">
          <label class="form-label" for="tenant_select">{{ _('Tenant') }}</label>
          <select name="tenant_id" id="tenant_select" class="form-select">
            <option value="" {% if not row.tenant_id %}selected{% endif %}>{{ _('Admin') }}</option>
            {% for tenant in tenants %}
              <option value="{{ tenant.tenant_id }}" {% if tenant.tenant_id == row.tenant_id %}selected{% endif %}>{{ tenant.name }}</option>
            {% endfor %}
          </select>
          <div class="form-text">{{ _('The selection controls which tenant the wallbox belongs to.') }}</div>
        </div>
      </div>
    </div>
  </div>

  <div class="card shadow-sm">
    <div class="card-header bg-transparent border-bottom-0 pb-0">
      <h2 class="h6 text-body fw-bold mb-0">{{ _('Location & remote access') }}</h2>
      <p class="text-muted small mb-0">{{ _('Optional information about the station and its remote access.') }}</p>
    </div>
    <div class="card-body pt-3">
      <div class="row g-3">
        <div class="col-md-6">
          <label class="form-label" for="location_name_input">{{ _('Location') }}</label>
          <input type="text" id="location_name_input" name="location_name" value="{{ row.location_name|e }}" class="form-control">
        </div>
        <div class="col-md-6">
          <label class="form-label" for="location_link_input">{{ _('Location link') }}</label>
          <input type="url" id="location_link_input" name="location_link" value="{{ row.location_link|e }}" class="form-control">
        </div>
        <div class="col-md-6">
          <label class="form-label" for="webui_remote_access_url_input">{{ _('WebUI remote access URL') }}</label>
          <div class="input-group">
            <input type="url" id="webui_remote_access_url_input" name="webui_remote_access_url" value="{{ row.webui_remote_access_url|e }}" class="form-control" aria-describedby="webui_remote_access_url_link">
            <a id="webui_remote_access_url_link" class="btn btn-outline-secondary{% if not row.webui_remote_access_url %} d-none{% endif %}" href="{{ row.webui_remote_access_url if row.webui_remote_access_url else '#' }}" target="_blank" rel="noopener noreferrer" title="{{ _('Open WebUI remote access') }}" aria-label="{{ _('Open WebUI remote access') }}">
              <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <path d="M18 13v6a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" />
                <polyline points="15 3 21 3 21 9" />
                <line x1="10" y1="14" x2="21" y2="3" />
              </svg>
            </a>
          </div>
        </div>
        <div class="col-md-6">
          <label class="form-label" for="load_management_remote_access_url_input">{{ _('Load management remote access URL') }}</label>
          <div class="input-group">
            <input type="url" id="load_management_remote_access_url_input" name="load_management_remote_access_url" value="{{ row.load_management_remote_access_url|e }}" class="form-control" aria-describedby="load_management_remote_access_url_link">
            <a id="load_management_remote_access_url_link" class="btn btn-outline-secondary{% if not row.load_management_remote_access_url %} d-none{% endif %}" href="{{ row.load_management_remote_access_url if row.load_management_remote_access_url else '#' }}" target="_blank" rel="noopener noreferrer" title="{{ _('Open load management remote access') }}" aria-label="{{ _('Open load management remote access') }}">
              <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <path d="M18 13v6a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" />
                <polyline points="15 3 21 3 21 9" />
                <line x1="10" y1="14" x2="21" y2="3" />
              </svg>
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="card shadow-sm">
    <div class="card-header bg-transparent border-bottom-0 pb-0">
      <h2 class="h6 text-body fw-bold mb-0">{{ _('Backend authentication') }}</h2>
      <p class="text-muted small mb-0">{{ _('Optional Basic Auth credentials for backend requests.') }}</p>
    </div>
    <div class="card-body pt-3">
      <div class="row g-3">
        <div class="col-md-6 col-lg-4">
          <label class="form-label" for="backend_basic_user_input">{{ _('Backend basic username') }}</label>
          <input type="text" id="backend_basic_user_input" name="backend_basic_user" value="{{ row.backend_basic_user|e }}" class="form-control">
        </div>
        <div class="col-md-6 col-lg-4">
          <label class="form-label" for="backend_basic_password_input">{{ _('Backend basic password') }}</label>
          <input type="password" id="backend_basic_password_input" name="backend_basic_password" value="{{ row.backend_basic_password|e }}" class="form-control" autocomplete="new-password">
        </div>
      </div>
    </div>
  </div>

  <div class="card shadow-sm">
    <div class="card-header bg-transparent border-bottom-0 pb-0">
      <h2 class="h6 text-body fw-bold mb-0">{{ _('OCPP connection') }}</h2>
      <p class="text-muted small mb-0">{{ _('Define which OCPP version the wallbox should use.') }}</p>
    </div>
    <div class="card-body pt-3">
      <div class="row g-3 align-items-center">
        <div class="col-md-6 col-lg-4">
          <label class="form-label" for="ocpp_subprotocol_select">{{ _('OCPP version') }}</label>
          <select name="ocpp_subprotocol" id="ocpp_subprotocol_select" class="form-select">
            <option value="auto" {% if not row.ocpp_subprotocol %}selected{% endif %}>{{ _('Auto (1.6 or 2.0.1)') }}</option>
            <option value="ocpp1.6" {% if row.ocpp_subprotocol == 'ocpp1.6' %}selected{% endif %}>{{ _('OCPP 1.6') }}</option>
            <option value="ocpp2.0.1" {% if row.ocpp_subprotocol == 'ocpp2.0.1' %}selected{% endif %}>{{ _('OCPP 2.0.1') }}</option>
          </select>
          <div class="form-text">{{ _('With a fixed selection the broker only accepts the chosen protocol.') }}</div>
        </div>
        <div class="col-md-6 col-lg-4">
          <div class="text-muted small mb-1">{{ _('Current connection') }}</div>
          {% if connection_protocol_error %}
            <div class="alert alert-warning py-2 px-3 mb-0 small">{{ connection_protocol_error }}</div>
          {% elif connection_protocol %}
            <span class="badge bg-success-subtle text-success">{{ connection_protocol }}</span>
          {% else %}
            <span class="badge bg-secondary-subtle text-secondary">{{ _('Not Connected') }}</span>
          {% endif %}
        </div>
      </div>
    </div>
  </div>

  <div class="card shadow-sm mb-2">
    <div class="card-header bg-transparent border-bottom-0 pb-0">
      <h2 class="h6 text-body fw-bold mb-0">{{ _('Routing & monitoring') }}</h2>
      <p class="text-muted small mb-0">{{ _('Control behavior and optional forwarding.') }}</p>
    </div>
    <div class="card-body pt-3">
      <div class="row g-3 align-items-end">
        <div class="col-md-4 col-lg-3">
          <label class="form-label" for="activity_select">{{ _('Activity') }}</label>
          <select name="activity" id="activity_select" class="form-select">
            <option value="forward" {% if row.activity=='forward' %}selected{% endif %}>{{ _('Allow') }}</option>
            <option value="block" {% if row.activity=='block' %}selected{% endif %}>{{ _('Block') }}</option>
          </select>
        </div>
        <div class="col-12">
          <div class="row g-3">
            <div class="col-md-3">
              <div class="form-check">
                <input class="form-check-input" type="checkbox" id="mqtt_enabled_check" name="mqtt_enabled" value="1" {% if row.mqtt_enabled %}checked{% endif %}>
                <label class="form-check-label" for="mqtt_enabled_check">{{ _('Enable MQTT forwarding') }}</label>
              </div>
            </div>
            <div class="col-md-3">
              <div class="form-check">
                <input class="form-check-input" type="checkbox" id="pnc_enabled_check" name="pnc_enabled" value="1" {% if row.pnc_enabled %}checked{% endif %}>
                <label class="form-check-label" for="pnc_enabled_check">{{ _('PnC enabled') }}</label>
              </div>
            </div>
            <div class="col-md-3">
              <div class="form-check">
                <input class="form-check-input" type="checkbox" id="measure_ping_check" name="measure_ping" value="1" {% if row.measure_ping %}checked{% endif %}>
                <label class="form-check-label" for="measure_ping_check">{{ _('Log WebSocket ping/pong') }}</label>
              </div>
            </div>
            <div class="col-md-3">
              <div class="form-check">
                <input class="form-check-input" type="checkbox" id="strict_availability_check" name="strict_availability" value="1" {% if row.strict_availability %}checked{% endif %}>
                <label class="form-check-label" for="strict_availability_check">{{ _('Strict availability') }}</label>
              </div>
            </div>
            <div class="col-md-3">
              <div class="form-check">
                <input class="form-check-input" type="checkbox" id="charging_analytics_check" name="charging_analytics" value="1" {% if row.charging_analytics %}checked{% endif %}>
                <label class="form-check-label" for="charging_analytics_check">{{ _('Enable charging analytics') }}</label>
              </div>
            </div>
            <div class="col-md-3">
              <div class="form-check">
                <input class="form-check-input" type="checkbox" id="extended_session_log_check" name="extended_session_log" value="1" {% if row.extended_session_log %}checked{% endif %}>
                <label class="form-check-label" for="extended_session_log_check">{{ _('Extended session log') }}</label>
                <div class="form-text">{{ _('Store detailed session records and summary emails for this wallbox.') }}</div>
              </div>
            </div>
            <div class="col-md-12 col-lg-8 d-flex align-items-start gap-3">
              <div class="form-check mt-1">
                <input class="form-check-input" type="checkbox" id="disconnect_alert_enabled_check" name="disconnect_alert_enabled" value="1" {% if row.disconnect_alert_enabled %}checked{% endif %}>
                <label class="form-check-label" for="disconnect_alert_enabled_check">{{ _('Notify on disconnect/reconnect') }}</label>
              </div>
              <div class="flex-grow-1">
                <label class="form-label" for="disconnect_alert_email_input">{{ _('Notification email') }}</label>
                <input type="text" inputmode="email" id="disconnect_alert_email_input" name="disconnect_alert_email" value="{{ row.disconnect_alert_email|e }}" class="form-control" placeholder="name@example.com">
                <div class="form-text">{{ _('Send an email if the wallbox is offline for 30+ minutes and when it reconnects. Separate multiple addresses with semicolons; spaces are trimmed.') }}</div>
                <div class="d-flex flex-wrap align-items-center gap-2 mt-2">
                  <button type="button" id="disconnect_alert_test_button" class="btn btn-outline-secondary btn-sm">{{ _('Mail-Testversand') }}</button>
                  <div id="disconnect_alert_test_status" class="small text-muted"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="card mb-4">
    <div class="card-body">
      <h6 class="mb-3">{{ _('OCPI backend assignment') }}</h6>
      <p class="text-muted">{{ _('Activate the desired backends and optionally assign priorities.') }}</p>
      <div class="table-responsive">
        <table class="table align-items-center mb-0">
          <tr>
            <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">{{ _('Backend') }}</th>
            <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 text-center">{{ _('Active') }}</th>
            <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">{{ _('Priority') }}</th>
          </tr>
          {% for backend in row.available_ocpi_backends %}
          {% set assignment = row.ocpi_assignment_map.get(backend.backend_id) %}
          <tr>
            <td>{{ backend.name }}</td>
            <td class="text-center">
              <input class="form-check-input" type="checkbox" name="ocpi_backend_{{ backend.backend_id }}_enabled" value="1" {% if assignment and assignment.enabled %}checked{% endif %}>
            </td>
            <td style="max-width: 150px;">
              <input class="form-control" type="number" name="ocpi_backend_{{ backend.backend_id }}_priority" value="{{ assignment.priority if assignment else 100 }}" min="0" max="10000">
            </td>
          </tr>
          {% endfor %}
          {% if not row.available_ocpi_backends %}
          <tr>
            <td colspan="3" class="text-muted">{{ _('No OCPI backends configured. Please add them under "{menu}" first.', menu='<a href="' ~ url_for('ocpi_config') ~ '">' ~ _('OCPI Backends') ~ '</a>')|safe }}</td>
          </tr>
          {% endif %}
        </table>
      </div>
    </div>
  </div>

  <div class="d-flex flex-column flex-md-row gap-3 justify-content-between align-items-stretch align-items-md-center mt-2">
    <div class="btn-group" role="group" aria-label="Monitoring">
      <a href="{{ url_for('ping_monitor', source_url=row.source_url, hours=24) }}" class="btn btn-outline-info btn-sm">{{ _('Ping monitoring (24h)') }}</a>
      <a href="{{ url_for('mini_cpms_local_lists', station_id=row.source_url.split('/')[-1]) }}#collapseRepo" class="btn btn-outline-primary btn-sm">{{ _('Manage local list') }}</a>
    </div>
    <div class="d-flex gap-2 ms-md-auto">
      <a href="{{ url_for('dashboard') }}" class="btn btn-outline-secondary btn-sm">{{ _('Cancel') }}</a>
      <button type="submit" class="btn bg-gradient-dark btn-sm mb-0 pipelet-btn">{{ _('Save') }}</button>
    </div>
  </div>
</form>
</main>

<script>
document.addEventListener('DOMContentLoaded', function() {
  var select = document.getElementById('target_base_select');
  var wsInput = document.getElementById('ws_url_input');
  var stationId = {{ row.source_url.split('/')[-1] | tojson }};
  if (select && wsInput) {
    select.addEventListener('change', function() {
      var base = this.value;
      if (base) {
        wsInput.value = base.replace(/\/$/, '') + '/' + stationId;
      }
    });
  }

  function setupRemoteAccessLink(inputId, linkId) {
    var input = document.getElementById(inputId);
    var link = document.getElementById(linkId);
    if (!input || !link) {
      return;
    }

    function updateLink() {
      var value = input.value.trim();
      if (value) {
        link.classList.remove('d-none');
        link.setAttribute('href', value);
      } else {
        link.classList.add('d-none');
        link.removeAttribute('href');
      }
    }

    input.addEventListener('input', updateLink);
    updateLink();
  }

  setupRemoteAccessLink('webui_remote_access_url_input', 'webui_remote_access_url_link');
  setupRemoteAccessLink('load_management_remote_access_url_input', 'load_management_remote_access_url_link');

  var disconnectEmailInput = document.getElementById('disconnect_alert_email_input');
  var form = disconnectEmailInput ? disconnectEmailInput.form : null;
  var emailPattern = /^[^@\s]+@[^@\s]+\.[^@\s]+$/;
  var testButton = document.getElementById('disconnect_alert_test_button');
  var testStatus = document.getElementById('disconnect_alert_test_status');
  var sourceUrlInput = document.getElementById('source_url_input');
  var origSourceInput = document.querySelector('input[name=\"orig_source_url\"]');

  function normalizeEmails(value) {
    return value
      .split(/[;,]/)
      .map(function(entry) { return entry.trim(); })
      .filter(function(entry) { return entry.length > 0; });
  }

  function setTestStatus(message, isError) {
    if (!testStatus) {
      return;
    }
    testStatus.textContent = message || '';
    testStatus.classList.remove('text-danger', 'text-success', 'text-muted');
    if (message) {
      testStatus.classList.add(isError ? 'text-danger' : 'text-success');
    } else {
      testStatus.classList.add('text-muted');
    }
  }

  if (disconnectEmailInput && form) {
    disconnectEmailInput.addEventListener('input', function() {
      disconnectEmailInput.setCustomValidity('');
    });

    form.addEventListener('submit', function(event) {
      var raw = (disconnectEmailInput.value || '').trim();
      if (!raw) {
        disconnectEmailInput.setCustomValidity('');
        return;
      }

      var recipients = normalizeEmails(raw);
      var invalid = recipients.find(function(entry) { return !emailPattern.test(entry); });
      if (invalid) {
        event.preventDefault();
        disconnectEmailInput.setCustomValidity('{{ _("Please enter valid email addresses separated by semicolons.") }}');
        disconnectEmailInput.reportValidity();
        return;
      }

      disconnectEmailInput.value = recipients.join('; ');
      disconnectEmailInput.setCustomValidity('');
    });

    if (testButton) {
      testButton.addEventListener('click', function() {
        var raw = (disconnectEmailInput.value || '').trim();
        var recipients = normalizeEmails(raw);
        var invalid = recipients.find(function(entry) { return !emailPattern.test(entry); });
        if (!recipients.length) {
          setTestStatus('{{ _("Please enter at least one email address.") }}', true);
          disconnectEmailInput.focus();
          return;
        }
        if (invalid) {
          disconnectEmailInput.setCustomValidity('{{ _("Please enter valid email addresses separated by semicolons.") }}');
          disconnectEmailInput.reportValidity();
          setTestStatus('{{ _("Please enter valid email addresses separated by semicolons.") }}', true);
          return;
        }

        disconnectEmailInput.setCustomValidity('');
        var payload = new URLSearchParams();
        payload.set('disconnect_alert_email', recipients.join('; '));
        if (sourceUrlInput) {
          payload.set('source_url', sourceUrlInput.value || '');
        }
        if (origSourceInput) {
          payload.set('orig_source_url', origSourceInput.value || '');
        }

        testButton.disabled = true;
        setTestStatus('{{ _("Sending test email...") }}', false);
        fetch('{{ url_for('send_disconnect_alert_test') }}', {
          method: 'POST',
          headers: { 'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8' },
          body: payload.toString()
        })
        .then(function(response) {
          return response.json()
            .then(function(data) { return { ok: response.ok, data: data }; })
            .catch(function() { return { ok: response.ok, data: {} }; });
        })
        .then(function(result) {
          if (result.ok) {
            setTestStatus(result.data.message || '{{ _("Test email sent.") }}', false);
          } else {
            setTestStatus(result.data.error || '{{ _("Unable to send test email.") }}', true);
          }
        })
        .catch(function() {
          setTestStatus('{{ _("Unable to send test email.") }}', true);
        })
        .finally(function() {
          testButton.disabled = false;
        });
      });
    }
  }
});
</script>

{% endblock %}