{% extends "hub/base.html" %}
{% load static socialaccount %}
{% block title %}Sign Up - SciTeX Orochi{% endblock %}
{% block extra_css %}
    <link rel="stylesheet" href="{% static 'hub/auth.css' %}">
{% endblock %}
{% block body %}
    <div class="auth-card">
        <img src="{% static 'hub/orochi-icon.png' %}" alt="Orochi" class="logo">
        <h1>SciTeX Orochi</h1>
        <p class="subtitle">Create your account</p>
        {% if messages %}
            {% for message in messages %}<div class="{{ message.tags }}">{{ message }}</div>{% endfor %}
        {% endif %}
        <div class="social-buttons">
            {% if sso_url %}
                <form method="post" action="{% provider_login_url 'scitex' %}">
                    {% csrf_token %}
                    <button type="submit" class="btn btn-social btn-scitex">Sign up with SciTeX</button>
                </form>
            {% endif %}
            <form method="post" action="{% provider_login_url 'google' %}">
                {% csrf_token %}
                <button type="submit" class="btn btn-social btn-google">Sign up with Google</button>
            </form>
            <form method="post" action="{% provider_login_url 'orcid' %}">
                {% csrf_token %}
                <button type="submit" class="btn btn-social btn-orcid">Sign up with ORCID</button>
            </form>
        </div>
        <div class="divider">
            <span>or</span>
        </div>
        <form method="post">
            {% csrf_token %}
            {% if invite_token %}<input type="hidden" name="invite" value="{{ invite_token }}">{% endif %}
            <div class="form-group">
                <label for="id_username">Username</label>
                <input type="text"
                       name="username"
                       id="id_username"
                       autofocus
                       required
                       value="{{ request.POST.username }}">
            </div>
            <div class="form-group">
                <label for="id_email">Email</label>
                <input type="email"
                       name="email"
                       id="id_email"
                       required
                       value="{{ request.POST.email }}">
            </div>
            <div class="form-group">
                <label for="id_password">Password</label>
                <input type="password" name="password" id="id_password" required>
                <ul class="password-rules">
                    <li id="rule-length" class="unmet">At least 8 characters</li>
                    <li id="rule-lowercase" class="unmet">One lowercase letter</li>
                    <li id="rule-uppercase" class="unmet">One uppercase letter</li>
                    <li id="rule-number" class="unmet">One number</li>
                    <li id="rule-special" class="unmet">One special character</li>
                    <li id="rule-match" class="unmet">Passwords match</li>
                </ul>
            </div>
            <div class="form-group">
                <label for="id_password2">Confirm password</label>
                <input type="password" name="password2" id="id_password2" required>
            </div>
            <button type="submit" class="btn btn-primary">Sign Up</button>
        </form>
        <div class="auth-footer">
            Already have an account? <a href="{% url 'signin' %}">Sign in</a>
        </div>
    </div>
{% endblock %}
{% block extra_js %}
    <script src="{% static 'hub/password-rules.js' %}"></script>
{% endblock %}