{% extends "static/login_base.html" %}

{% block title %}enviPath - Sign In{% endblock %}

{% block extra_styles %}
/* Tab styling */
.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}

input[type="radio"].tab-radio {
    display: none;
}

.tab-label {
    cursor: pointer;
    padding: 0.75rem 1.5rem;
    border-bottom: 2px solid transparent;
    transition: all 0.3s ease;
}

.tab-label:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

input[type="radio"].tab-radio:checked + .tab-label {
    border-bottom-color: #3b82f6;
    font-weight: 600;
}
{% endblock %}

{% block content %}
<!-- Tab Navigation -->
<div class="border-b border-base-300 mb-6">
    <div class="flex justify-start">
        <input type="radio" name="auth-tab" id="tab-signin" class="tab-radio" checked>
        <label for="tab-signin" class="tab-label">Sign In</label>

        <input type="radio" name="auth-tab" id="tab-signup" class="tab-radio">
        <label for="tab-signup" class="tab-label">Register</label>
    </div>
</div>

<!-- Sign In Tab -->
<div id="content-signin" class="tab-content active">
    <form method="post" action="{% url 'login' %}" class="space-y-4">
        {% csrf_token %}
        <input type="hidden" name="login" value="true"/>

        <div class="form-control">
            <label class="label" for="username">
                <span class="label-text">Username</span>
            </label>
            <input type="text" id="username" name="username" placeholder="username"
                   class="input input-bordered w-full" required autocomplete="username">
        </div>

        <div class="form-control">
            <label class="label" for="passwordinput">
                <span class="label-text">Password</span>
            </label>
            <input type="password" id="passwordinput" name="password" placeholder="••••••••"
                   class="input input-bordered w-full" required autocomplete="current-password">
        </div>

        <div class="text-right">
            <a href="{% url 'password_reset' %}" class="link link-primary text-sm">Forgot password?</a>
        </div>

        <input type="hidden" name="next" value="{{ next }}"/>

        <button type="submit" name="signin" class="btn btn-primary w-full">Sign In</button>
    </form>
</div>

<!-- Register Tab -->
<div id="content-signup" class="tab-content">
    <div class="alert alert-info mb-4 text-sm">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="h-6 w-6 shrink-0 stroke-current">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
        </svg>
        <div>
            <div class="font-bold">Password Requirements</div>
            <div class="text-xs mt-1">
                • 8 to 30 characters<br>
                • Upper and lower case letters<br>
                • Digits and special characters (_, -, +)
            </div>
        </div>
    </div>

    <form method="post" action="{% url 'login' %}" class="space-y-4">
        {% csrf_token %}
        <input type="hidden" name="register" value="true"/>

        <div class="form-control">
            <label class="label" for="userid">
                <span class="label-text">Username</span>
            </label>
            <input type="text" id="userid" name="username" placeholder="username"
                   class="input input-bordered w-full" required autocomplete="username">
        </div>

        <div class="form-control">
            <label class="label" for="email">
                <span class="label-text">Email</span>
            </label>
            <input type="email" id="email" name="email" placeholder="user@envipath.org"
                   class="input input-bordered w-full" required autocomplete="email">
        </div>

        <div class="form-control">
            <label class="label" for="password">
                <span class="label-text">Password</span>
            </label>
            <input type="password" id="password" name="password" placeholder="••••••••"
                   class="input input-bordered w-full" required autocomplete="new-password">
        </div>

        <div class="form-control">
            <label class="label" for="rpassword">
                <span class="label-text">Repeat Password</span>
            </label>
            <input type="password" id="rpassword" name="rpassword" placeholder="••••••••"
                   class="input input-bordered w-full" required autocomplete="new-password">
        </div>

        <input type="hidden" name="next" value="{{ next }}"/>

        <button type="submit" name="confirmsignup" class="btn btn-success w-full">Sign Up</button>
    </form>

    <!-- Why Register Section -->
    <div class="mt-6 p-4 bg-base-200 rounded-lg">
        <h3 class="font-semibold mb-2">Why register?</h3>
        <p class="text-sm mb-2">Registration is required to run pathway predictions as they are computationally costly operations.</p>
        <p class="text-sm mb-2">After you register, you also gain additional permissions:</p>
        <ul class="text-sm space-y-1 ml-4">
            <li>• Create your own packages</li>
            <li>• Submit data for review</li>
            <li>• Set access permissions to your data</li>
        </ul>
        <p class="text-sm mt-3">
            Questions? Contact <a href="mailto:admin@envipath.org" class="link link-primary">admin@envipath.org</a>
        </p>
    </div>
</div>
{% endblock %}

{% block extra_scripts %}
<script>
    // Tab switching functionality
    document.querySelectorAll('input[name="auth-tab"]').forEach(radio => {
        radio.addEventListener('change', function() {
            // Hide all content
            document.querySelectorAll('.tab-content').forEach(content => {
                content.classList.remove('active');
            });

            // Show selected content
            const contentId = 'content-' + this.id.replace('tab-', '');
            document.getElementById(contentId).classList.add('active');
        });
    });

    // Check for hash in URL to auto-select tab
    window.addEventListener('DOMContentLoaded', function() {
        const hash = window.location.hash.substring(1); // Remove the # symbol
        if (hash === 'signup' || hash === 'signin') {
            const tabRadio = document.getElementById('tab-' + hash);
            if (tabRadio) {
                tabRadio.checked = true;
                // Trigger change event to show correct content
                tabRadio.dispatchEvent(new Event('change'));
            }
        }
    });
</script>
{% endblock %}