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

{% 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_input }}

    <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>

    <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_input }}
    <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 %}