{% load i18n %}
{% if form.errors %}
    <div class="eenos-alert alert alert-danger mb-3" role="alert">
        <i data-lucide="circle-x"></i>
        <div>
            <strong>{% translate "Please correct the following errors:" %}</strong>
            {% for error in form.non_field_errors %}<div>{{ error|escape }}</div>{% endfor %}
            {% for field in form %}
                {% for error in field.errors %}<div>{{ error|escape }}</div>{% endfor %}
            {% endfor %}
        </div>
    </div>
{% endif %}
{% if messages %}
    {% for message in messages %}
        {% if message.tags == "info" %}
            <div class="eenos-card mb-4">
                <div class="d-flex align-items-center justify-content-between gap-3 mb-3">
                    <div>
                        <div class="eenos-panel-title d-flex align-items-center gap-2">
                            <i data-lucide="terminal"></i>
                            {% translate "Service Status Output" %}
                        </div>
                        <div class="eenos-panel-subtitle">{% translate "Detailed output returned by systemctl." %}</div>
                    </div>
                </div>
                <pre class="eenos-code-view eenos-log-output"
                     aria-label="{% translate 'Service status command output' %}">{{ message }}</pre>
            </div>
        {% else %}
            <div class="eenos-alert alert {% if message.tags == 'success' %}alert-success{% elif message.tags == 'warning' %}alert-warning{% else %}alert-danger{% endif %} mb-3"
                 role="alert">
                {% if message.tags == "success" %}
                    <i data-lucide="circle-check"></i>
                {% elif message.tags == "warning" %}
                    <i data-lucide="triangle-alert"></i>
                {% else %}
                    <i data-lucide="circle-x"></i>
                {% endif %}
                {{ message }}
            </div>
        {% endif %}
    {% endfor %}
{% endif %}