{% extends "base.html" %}
{% load static %}

{% block title %}Kayıt Ol - SafePass{% endblock %}

{% block extra_css %}
<link rel="stylesheet" href="{% static 'css/components/auth.css' %}">
{% endblock %}

{% block content %}
<div class="auth-container">
    <div class="auth-card">
        <div class="auth-header">
            <h1>🔐 SafePass</h1>
            <p>Dış dünyaya kapalı güvenliğinizi başlatın: Yeni bir hesap oluşturun.</p>
            <button type="button" class="btn-info" id="info-btn">ℹ️ Nasıl Çalışır?</button>
        </div>
        
        <form id="register-form" method="post" action="/api/auth/register">
            {% csrf_token %}
            
            <div class="form-group">
                <label class="form-label" for="username">Kullanıcı Adı</label>
                <input type="text" class="form-input" id="username" name="username" required autofocus>
            </div>
            
            <div class="form-group">
                <label class="form-label" for="master-password">Şifre</label>
                <input type="password" class="form-input" id="master-password" name="master_password" 
                       required minlength="8" placeholder="En az 8 karakter">
                <small class="form-hint">💡 Güçlü şifre: Büyük/küçük harf, rakam ve sembol (!@#$%)</small>
            </div>
            
            <div class="form-group">
                <label class="form-label" for="master-password-confirm">Şifre (Tekrar)</label>
                <input type="password" class="form-input" id="master-password-confirm" 
                       name="master_password_confirm" required>
                <small class="form-hint password-match-hint" id="password-match-hint"></small>
            </div>
            
            <div class="form-group checkbox-group">
                <label class="checkbox-label">
                    <input type="checkbox" required>
                    <span>⚠️ Ana şifremi unutursam verilerime erişemeyeceğimi anlıyorum</span>
                </label>
            </div>
            
            <button type="submit" class="btn btn-primary btn-auth">Kayıt Ol</button>
            
            <div class="auth-link">
                <span>Zaten hesabın var mı?</span>
                <a href="/auth/login">Giriş yap</a>
            </div>
        </form>
        
        {% if error %}
        <div class="alert alert-error mt-3">{{ error }}</div>
        {% endif %}
    </div>
    
    <!-- Info Modal -->
    <div class="info-modal" id="info-modal">
        <div class="info-modal-content">
            <button class="info-modal-close" id="close-modal">✕</button>
            <h2>🔒 SafePass Hakkında</h2>
            
            <div class="info-section">
                <h3>❓ SafePass Nedir?</h3>
                <p>SafePass, şifrelerinizi güvenli bir şekilde bilgisayarınızda saklayan offline bir şifre yöneticisidir. LastPass veya 1Password gibi çalışır, ancak tamamen yerel ve internet gerektirmez.</p>
            </div>
            
            <div class="info-section">
                <h3>💾 Verilerim Nerede Saklanıyor?</h3>
                <p>Tüm şifreleriniz sadece kendi bilgisayarınızda, <code>~/.safepass/</code> klasöründe saklanır. Hiçbir bulut sunucuya, internete veya başka bir yere gönderilmez. Verileriniz tamamen sizin kontrolünüzde.</p>
            </div>
            
            <div class="info-section">
                <h3>🔐 Şifrelerim Güvende mi?</h3>
                <p>Evet! Tüm şifreleriniz güçlü şifreleme ile korunur. Ana şifrenizi sadece siz bilirsiniz ve hiçbir yerde saklanmaz. Bu sayede verilerinize sadece siz erişebilirsiniz.</p>
            </div>
            
            <div class="info-section">
                <h3>⚠️ Ana Şifremi Unutursam Ne Olur?</h3>
                <p><strong>Çok önemli:</strong> Ana şifrenizi unutursanız verilerinize erişemezsiniz ve kurtarma yolu yoktur. Bu bir güvenlik özelliğidir - hiç kimse (biz bile) şifrelerinize erişemez. Ana şifrenizi güvenli bir yerde not edin!</p>
            </div>
            
            <div class="info-section">
                <h3>💻 Birden Fazla Bilgisayarda Kullanabilir miyim?</h3>
                <p>Her bilgisayarda ayrı hesap oluşturmanız gerekir. Ancak <code>~/.safepass/</code> klasörünü USB veya bulut depolama ile yedekleyip başka bir bilgisayara taşıyabilirsiniz.</p>
            </div>
            
            <div class="info-section">
                <h3>🌐 İnternet Bağlantısı Gerekli mi?</h3>
                <p>Hayır! SafePass tamamen offline çalışır. Kurulumdan sonra internet bağlantısına ihtiyacınız olmaz. Bu sayede daha güvenli ve hızlıdır.</p>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script src="{% static 'js/modules/auth.js' %}"></script>
{% endblock %}