{% extends "op_zz_frame.html" %}
{% block centercontent %}
<main class="ct-docs-content-col" role="main">
  <h1 class="ct-docs-page-h1-title" id="content">Vehicle Database</h1>

  {% if message %}
  <div class="alert alert-success" role="alert">
    {{ message }}
  </div>
  {% endif %}

  {% if errors %}
  <div class="alert alert-danger" role="alert">
    <ul class="mb-0">
      {% for error in errors %}
      <li>{{ error }}</li>
      {% endfor %}
    </ul>
  </div>
  {% endif %}

  <button type="button" class="btn btn-primary btn-sm mb-3" id="toggle-add-form"
    aria-expanded="{{ 'true' if show_add_form else 'false' }}">
    Add Vehicle
  </button>

  <div id="add-vehicle-card" class="card mb-4 {% if not show_add_form %}d-none{% endif %}">
    <div class="card-body">
      <h2 class="h5">New Vehicle</h2>
      <form method="post">
        <input type="hidden" name="action" value="add">
        <div class="row g-3">
          <div class="col-md-4">
            <label class="form-label" for="vehicle_name">Name *</label>
            <input id="vehicle_name" name="name" type="text" class="form-control" required
              value="{{ new_vehicle_form.name }}" placeholder="e.g. BMW i3 120 Ah">
          </div>
          <div class="col-md-4">
            <label class="form-label" for="vehicle_manufacturer">Manufacturer *</label>
            <input id="vehicle_manufacturer" name="manufacturer" type="text" class="form-control" required
              value="{{ new_vehicle_form.manufacturer }}" placeholder="e.g. BMW">
          </div>
          <div class="col-md-4">
            <label class="form-label" for="vehicle_model">Model *</label>
            <input id="vehicle_model" name="model" type="text" class="form-control" required
              value="{{ new_vehicle_form.model }}" placeholder="e.g. i3">
          </div>
          <div class="col-md-4">
            <label class="form-label" for="vehicle_battery_gross">Battery Size Gross (kWh)</label>
            <input id="vehicle_battery_gross" name="battery_size_gross_kwh" type="text" class="form-control"
              value="{{ new_vehicle_form.battery_size_gross_kwh }}" placeholder="e.g. 42.2">
          </div>
          <div class="col-md-4">
            <label class="form-label" for="vehicle_battery_net">Battery Size Net (kWh)</label>
            <input id="vehicle_battery_net" name="battery_size_net_kwh" type="text" class="form-control"
              value="{{ new_vehicle_form.battery_size_net_kwh }}" placeholder="e.g. 38.0">
          </div>
          <div class="col-md-4">
            <label class="form-label" for="vehicle_ac_losses">AC Charging Losses (%)</label>
            <input id="vehicle_ac_losses" name="ac_charging_losses_percent" type="text" class="form-control"
              value="{{ new_vehicle_form.ac_charging_losses_percent }}" placeholder="Default 8">
          </div>
        </div>
        <div class="mt-3">
          <button type="submit" class="btn btn-success btn-sm">Save Vehicle</button>
        </div>
      </form>
    </div>
  </div>

  <div class="card">
    <div class="card-body">
      <h2 class="h5">Registered Vehicles</h2>
      <div class="table-responsive">
        <table class="table align-items-center mb-0">
          <thead>
            <tr>
              <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Name</th>
              <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Manufacturer</th>
              <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Model</th>
              <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Battery Gross (kWh)</th>
              <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Battery Net (kWh)</th>
              <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">AC Losses (%)</th>
              <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 text-end">Actions</th>
            </tr>
          </thead>
          <tbody>
            {% for vehicle in vehicles %}
            <tr>
              <form method="post">
                <td>
                  <input type="text" name="name" class="form-control" value="{{ vehicle.name }}" required>
                </td>
                <td>
                  <input type="text" name="manufacturer" class="form-control" value="{{ vehicle.manufacturer }}" required>
                </td>
                <td>
                  <input type="text" name="model" class="form-control" value="{{ vehicle.model }}" required>
                </td>
                <td>
                  <input type="text" name="battery_size_gross_kwh" class="form-control"
                    value="{{ format_decimal_for_input(vehicle.battery_size_gross_kwh) }}">
                </td>
                <td>
                  <input type="text" name="battery_size_net_kwh" class="form-control"
                    value="{{ format_decimal_for_input(vehicle.battery_size_net_kwh) }}">
                </td>
                <td>
                  <input type="text" name="ac_charging_losses_percent" class="form-control"
                    value="{{ format_decimal_for_input(vehicle.ac_charging_losses_percent) }}">
                </td>
                <td class="text-end">
                  <input type="hidden" name="id" value="{{ vehicle.id }}">
                  <div class="btn-group" role="group">
                    <button type="submit" name="action" value="update" class="btn btn-primary btn-sm">Save</button>
                    <button type="submit" name="action" value="delete" class="btn btn-danger btn-sm"
                      onclick="return confirm('Delete vehicle {{ vehicle.name }}?');">Delete</button>
                  </div>
                </td>
              </form>
            </tr>
            {% else %}
            <tr>
              <td colspan="7" class="text-center text-muted">No vehicles registered yet.</td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </div>
  </div>
</main>

<script>
  document.addEventListener('DOMContentLoaded', function () {
    var toggleButton = document.getElementById('toggle-add-form');
    var formCard = document.getElementById('add-vehicle-card');
    if (!toggleButton || !formCard) {
      return;
    }
    toggleButton.addEventListener('click', function () {
      var isHidden = formCard.classList.contains('d-none');
      if (isHidden) {
        formCard.classList.remove('d-none');
        toggleButton.setAttribute('aria-expanded', 'true');
        var firstInput = formCard.querySelector('input[name="name"]');
        if (firstInput) {
          firstInput.focus();
        }
      } else {
        formCard.classList.add('d-none');
        toggleButton.setAttribute('aria-expanded', 'false');
      }
    });
  });
</script>
{% endblock %}