{% extends "admin/base/entity_change_list.html" %}
{% load i18n %}

{% block extrastyle %}
  {{ block.super }}
  <style>
    .cpsim-service-banner__label {
      display: block;
      font-size: 0.75rem;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--body-quiet-color, #6b6b6b);
      margin-bottom: 0.25rem;
    }

    .cpsim-service-banner__status {
      font-weight: 600;
      font-size: 1rem;
      color: var(--body-fg, #1d1d1d);
    }

    .cpsim-service-banner__status--enabled {
      color: var(--success-fg, #1a7f37);
    }

    .cpsim-service-banner__status--disabled {
      color: var(--error-fg, #b42318);
    }

    .cpsim-service-banner__form {
      margin: 0;
    }

    .cpsim-service-banner__panel {
      margin-bottom: 1rem;
      align-items: center;
      justify-content: space-between;
      flex-direction: row;
      flex-wrap: wrap;
    }
  </style>
{% endblock %}

{% block result_list %}
  <div class="admin-ui-panel admin-ui-stack cpsim-service-banner__panel">
    <div>
      <span class="cpsim-service-banner__label">{% trans "OCPP Simulator" %}</span>
      {% if cpsim_feature %}
        <span class="cpsim-service-banner__status {% if cpsim_service_enabled %}cpsim-service-banner__status--enabled{% else %}cpsim-service-banner__status--disabled{% endif %}">
          {{ cpsim_service_status }}
        </span>
      {% else %}
        <span class="cpsim-service-banner__status cpsim-service-banner__status--disabled">
          {% trans "Not configured" %}
        </span>
      {% endif %}
    </div>
    <div class="admin-ui-actions">
      {% if cpsim_feature %}
        <form method="post" action="{{ cpsim_toggle_url }}" class="cpsim-service-banner__form">
          {% csrf_token %}
          <button type="submit" class="admin-ui-button admin-ui-button--secondary">{% trans cpsim_toggle_label %}</button>
        </form>
      {% endif %}
      <a class="admin-ui-button admin-ui-button--secondary" href="{% url 'admin:nodes_nodefeature_changelist' %}">
        {% trans "Manage node features" %}
      </a>
    </div>
  </div>
  {{ block.super }}
{% endblock %}