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

{% block title %}ECP Login{% endblock %}
{% block header_title %}Sign In{% endblock %}
{% block header_subtitle %}Authenticate with your digital certificate{% endblock %}

{% block content %}
{% if step == "upload" %}
<form method="post" enctype="multipart/form-data" class="ecp-form" id="ecp-login-form">
    {% csrf_token %}
    <input type="hidden" name="step" value="upload">

    <div class="ecp-form-group">
        <label for="id_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_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-login-submit">
        🔐 Authenticate
    </button>
</form>

{% elif step == "challenge" %}
<div class="ecp-challenge-info">
    <div class="ecp-cert-details">
        <h3>Certificate Details</h3>
        <p><strong>Common Name:</strong> {{ cert_cn }}</p>
        <p><strong>Organization:</strong> {{ cert_org }}</p>
    </div>

    <div class="ecp-challenge-status">
        <div class="ecp-spinner"></div>
        <p>Verifying digital signature...</p>
    </div>
</div>

<form method="post" class="ecp-form" id="ecp-challenge-form">
    {% csrf_token %}
    <input type="hidden" name="step" value="challenge">
    <input type="hidden" name="signature" value="{{ signature }}">

    <button type="submit" class="ecp-btn ecp-btn-primary" id="btn-verify-submit">
        ✅ Confirm & Sign In
    </button>
</form>
{% endif %}
{% endblock %}

{% block footer %}
<p class="ecp-footer-text">
    Don't have an account?
    <a href="{% url 'ecp_auth:register' %}" class="ecp-link">Register with certificate</a>
</p>
{% endblock %}

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