<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}ECP Authentication{% endblock %}</title>
    <link rel="stylesheet" href="{{ static('ecp_auth/css/style.css') }}">
    {% block extra_head %}{% endblock %}
</head>

<body>
    <div class="ecp-container">
        <div class="ecp-card">
            <div class="ecp-header">
                <h1 class="ecp-title">
                    <span class="ecp-icon">🔐</span>
                    {% block header_title %}ECP Authentication{% endblock %}
                </h1>
                <p class="ecp-subtitle">{% block header_subtitle %}Electronic Digital Signature{% endblock %}</p>
            </div>

            {% if error %}
            <div class="ecp-alert ecp-alert-error" role="alert">
                <span class="ecp-alert-icon">⚠️</span>
                <span>{{ error }}</span>
            </div>
            {% endif %}

            {% if messages %}
            {% for message in messages %}
            <div class="ecp-alert ecp-alert-{{ message.tags }}" role="alert">
                {{ message }}
            </div>
            {% endfor %}
            {% endif %}

            <div class="ecp-content">
                {% block content %}{% endblock %}
            </div>

            <div class="ecp-footer">
                {% block footer %}{% endblock %}
            </div>
        </div>
    </div>

    {% block extra_scripts %}{% endblock %}
</body>

</html>