{% extends 'base.html' %}
{% block title %}Daftar Akun - 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">Registrasi Akun Baru</h2>
    <p class="text-xs text-slate-500 text-center mb-6">Bergabunglah dengan ekosistem review dan akselerasi riset LOGISRISET</p>
    
    <form action="{{ url_for('register') }}" method="POST" class="space-y-4">
        <!-- SELEKTOR MULTI-USER ROLE -->
        <div>
            <label class="block text-sm font-medium text-slate-700 mb-1">Mendaftar Sebagai (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 Pendaftaran --</option>
                <option value="Peneliti">Peneliti (Dosen / Mahasiswa S2-S3)</option>
                <option value="Editor">Editor Akademik / Reviewer Mitra</option>
                <option value="Konsultan">Konsultan Pendamping Riset</option>
                <option value="Super Admin">Super Admin (Akses Terbatas)</option>
            </select>
        </div>

        <div>
            <label class="block text-sm font-medium text-slate-700 mb-1">Nama Lengkap / Username</label>
            <input type="text" name="username" placeholder="Contoh: Dr. Trump Donald, M.Kom, S.Kom." 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">Email Utama (Instansi/Personal)</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" minlength="8" placeholder="Min. 8 karakter" 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-indigo-600 hover:bg-indigo-500 text-white font-bold p-3 rounded-lg shadow-md transition-all mt-6 text-sm">
            Daftar Sekarang
        </button>
    </form>
    
    <hr class="my-6 border-slate-100">
    
    <p class="text-xs text-center text-gray-600">
        Sudah punya akun? <a href="{{ url_for('login') }}" class="text-slate-900 font-semibold hover:underline">Login di sini</a>
    </p>
</div>
{% endblock %}