<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <title>Giriş</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="bg-light" style="min-height:100vh;">
<!-- Sağ üstte language seçici -->
<div style="position: fixed; top: 0; right: 0; z-index: 9999; margin: 18px 18px 0 0; text-align: right;">
    <div class="dropdown d-inline-block">
        <button class="btn btn-light btn-sm dropdown-toggle" type="button" id="langDropdown" data-bs-toggle="dropdown" aria-expanded="false">
            <i class="bi bi-translate me-1"></i>{{ _('language') }}
        </button>
        <ul class="dropdown-menu" aria-labelledby="langDropdown">
            <li><a class="dropdown-item" href="{{ url_for('set_lang', lang='tr') }}">{{ _('turkish') }}</a></li>
            <li><a class="dropdown-item" href="{{ url_for('set_lang', lang='en') }}">{{ _('english') }}</a></li>
        </ul>
    </div>
</div>
<!-- Ortada login kutusu -->
<div class="container d-flex justify-content-center align-items-center" style="min-height: 100vh;">
    <div class="card shadow p-4" style="max-width: 400px; width:100%;">
        <div class="text-center mb-4">
            <a href="https://monicont.com" target="_blank">
                <img src="{{ url_for('static', filename='img/monicont_logo.png') }}" alt="Monicont Logo" style="width: 280px; height: auto; max-width: 100%;">
            </a>
            <div style="font-size: 26px; color: #222; margin-top: 4px; font-weight: 500;">{{ _('login_subtitle') }}</div>
        </div>
        
        {% with messages = get_flashed_messages(with_categories=True) %}
          {% if messages %}
            {% for category, message in messages %}
              <div class="alert alert-{{ 'success' if category == 'success' else 'danger' }} mt-2" role="alert">{{ message }}</div>
            {% endfor %}
          {% endif %}
        {% endwith %}
        <form method="POST">
            <div class="mb-3">
                <label class="form-label">{{ _('login_username') }}</label>
                <input type="text" name="kullanici" class="form-control" required placeholder="{{ _('login_placeholder_user') }}">
            </div>
            <div class="mb-3">
                <label class="form-label">{{ _('login_password') }}</label>
                <input type="password" name="sifre" class="form-control" required placeholder="{{ _('login_placeholder_pass') }}">
            </div>
            <button type="submit" class="btn btn-primary w-100"><i class="bi bi-box-arrow-in-right me-2"></i>{{ _('login_button') }}</button>
        </form>
        <div class="text-center mt-3">
            <p class="mb-1">{{ _('register_subtitle') }}? <a href="{{ url_for('register') }}" class="text-decoration-none">{{ _('register_button') }}</a></p>
            <p class="mb-0">{{ _('forgot') }} <a href="#" class="text-decoration-none">{{ _('reset_password') }}</a></p>
        </div>
    </div>
</div>
<!-- Bootstrap Icons & JS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
