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

{% block title %}Giriş Yap - 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>Şifrelerinizi dış tehditlere kapalı,<br>güvenle koruyun.</p>
        </div>
        
        <form id="login-form" method="post" action="/api/auth/login">
            {% 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 placeholder="Şifrenizi girin">
            </div>
            
            <button type="submit" class="btn btn-primary btn-auth">Giriş Yap</button>
            
            <div class="auth-link">
                <span>Henüz hesabın yok mu?</span>
                <a href="/auth/register">Hesap oluştur</a>
            </div>
        </form>
        
        {% if error %}
        <div class="alert alert-error mt-3">{{ error }}</div>
        {% endif %}
    </div>
</div>
{% endblock %}

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