{% extends 'base.html' %}
{% block title %}Masuk ke Workspace - LOGISRISET{% endblock %}

{% block content %}
<div class="max-w-md mx-auto bg-white p-8 rounded-2xl shadow-lg my-10 border border-slate-100">
    <h2 class="text-2xl font-bold text-slate-900 mb-2 text-center">Login Masuk</h2>
    <p class="text-xs text-slate-500 text-center mb-6">Silakan pilih peran dan masukkan kredensial akun Anda</p>
    
    <form action="{{ url_for('login') }}" method="POST" class="space-y-4">
        <!-- SELEKTOR MULTI-USER ROLE -->
        <div>
            <label class="block text-sm font-medium text-slate-700 mb-1">Peran Pengguna (Role)</label>
            <select name="role" required class="mt-1 block w-full rounded-md border-gray-300 shadow-sm border p-2.5 text-sm bg-slate-50 text-slate-800 focus:ring-2 focus:ring-indigo-600 focus:border-indigo-600 focus:outline-none">
                <option value="" disabled selected>-- Pilih Peran Anda --</option>
                <option value="Peneliti">Peneliti (Dosen / Mahasiswa S2-S3)</option>
                <option value="Editor">Editor Akademik / Reviewer</option>
                <option value="Konsultan">Konsultan Pendamping</option>
                <option value="Super Admin">Super Admin Ekosistem</option>
            </select>
        </div>

        <div>
            <label class="block text-sm font-medium text-slate-700 mb-1">Email</label>
            <input type="email" name="email" placeholder="nama@universitas.ac.id" required class="mt-1 block w-full rounded-md border-gray-300 shadow-sm border p-2.5 text-sm focus:ring-2 focus:ring-indigo-600 focus:border-indigo-600 focus:outline-none">
        </div>
        
        <div>
            <label class="block text-sm font-medium text-slate-700 mb-1">Password</label>
            <input type="password" name="password" placeholder="••••••••" required class="mt-1 block w-full rounded-md border-gray-300 shadow-sm border p-2.5 text-sm focus:ring-2 focus:ring-indigo-600 focus:border-indigo-600 focus:outline-none">
        </div>

        <button type="submit" class="w-full bg-slate-900 hover:bg-slate-800 text-white font-bold p-3 rounded-lg shadow-md transition-all mt-6 text-sm">
            Masuk ke Workspace
        </button>
    </form>
    
    <hr class="my-6 border-slate-100">
    
    <p class="text-xs text-center text-gray-600">
        Belum tergabung sebagai mitra? <a href="{{ url_for('register') }}" class="text-indigo-600 font-semibold hover:underline">Registrasi di sini</a>
    </p>
</div>
{% endblock %}