{% extends "ecp_auth/base.html" %}
{% load static %}

{% block title %}ECP Registration{% endblock %}
{% block header_title %}Register{% endblock %}
{% block header_subtitle %}Create an account with your digital certificate{% endblock %}

{% block content %}
<form method="post" enctype="multipart/form-data" class="ecp-form" id="ecp-register-form">
    {% csrf_token %}

    <div class="ecp-form-group">
        <label for="id_username" class="ecp-label">
            👤 Username
        </label>
        {{ form.username }}
        {% if form.username.errors %}
        <div class="ecp-field-error">{{ form.username.errors.0 }}</div>
        {% endif %}
    </div>

    <div class="ecp-form-group">
        <label for="id_email" class="ecp-label">
            ✉️ Email Address (optional)
        </label>
        {{ form.email }}
        {% if form.email.errors %}
        <div class="ecp-field-error">{{ form.email.errors.0 }}</div>
        {% endif %}
    </div>

    <div class="ecp-form-group">
        <label for="id_register_pkcs12_file" class="ecp-label">
            📄 Certificate File (.p12 / .pfx)
        </label>
        {{ form.pkcs12_file }}
        {% if form.pkcs12_file.errors %}
        <div class="ecp-field-error">{{ form.pkcs12_file.errors.0 }}</div>
        {% endif %}
        <p class="ecp-help-text">Upload your PKCS#12 certificate file</p>
    </div>

    <div class="ecp-form-group">
        <label for="id_register_pkcs12_password" class="ecp-label">
            🔑 Certificate Password
        </label>
        {{ form.pkcs12_password }}
        {% if form.pkcs12_password.errors %}
        <div class="ecp-field-error">{{ form.pkcs12_password.errors.0 }}</div>
        {% endif %}
        <p class="ecp-help-text">Leave blank if no password is set</p>
    </div>

    {% if form.non_field_errors %}
    <div class="ecp-alert ecp-alert-error">
        {% for error in form.non_field_errors %}
        <p>{{ error }}</p>
        {% endfor %}
    </div>
    {% endif %}

    <button type="submit" class="ecp-btn ecp-btn-primary" id="btn-register-submit">
        📝 Register
    </button>
</form>
{% endblock %}

{% block footer %}
<p class="ecp-footer-text">
    Already have an account?
    <a href="{% url 'ecp_auth:login' %}" class="ecp-link">Sign in with certificate</a>
</p>
{% endblock %}

{% block extra_scripts %}
<script src="{% static 'ecp_auth/js/ecp.js' %}"></script>
{% endblock %}