<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ _('register_title') }} - iAccess</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <style>
        body {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .register-container {
            background: white;
            border-radius: 15px;
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
            padding: 40px;
            width: 100%;
            max-width: 500px;
        }
        .logo {
            text-align: center;
            margin-bottom: 30px;
        }
        .logo img {
            width: 220px;
            height: auto;
            max-height: 200px;
        }
        .form-control {
            border-radius: 10px;
            border: 2px solid #e9ecef;
            padding: 12px 15px;
            transition: all 0.3s ease;
        }
        .form-control:focus {
            border-color: #667eea;
            box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
        }
        .btn-register {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border: none;
            border-radius: 10px;
            padding: 12px;
            font-weight: 600;
            transition: all 0.3s ease;
        }
        .btn-register:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
        }
        .login-link {
            text-align: center;
            margin-top: 20px;
        }
        .alert {
            border-radius: 10px;
            border: none;
        }
    </style>
</head>
<body>
    <div class="register-container">
        <div class="logo">
            <a href="https://monicont.com" target="_blank">
                <img src="{{ url_for('static', filename='img/monicont_logo.png') }}" alt="Logo">
            </a>
            <h3 class="mt-3">{{ _('login_subtitle') }}</h3>
            <p class="text-muted">{{ _('register_subtitle') }}</p>
        </div>

        {% with messages = get_flashed_messages(with_categories=true) %}
            {% if messages %}
                {% for category, message in messages %}
                    <div class="alert alert-{{ 'danger' if category == 'error' else 'success' }} alert-dismissible fade show" role="alert">
                        {{ message }}
                        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                    </div>
                {% endfor %}
            {% endif %}
        {% endwith %}

        <form method="POST" action="{{ url_for('register') }}">
            <div class="mb-3">
                <label for="full_name" class="form-label">
                    <i class="fas fa-user"></i> {{ _('register_fullname') }}
                </label>
                <input type="text" class="form-control" id="full_name" name="full_name" 
                       value="{{ request.form.get('full_name', '') }}" required>
            </div>

            <div class="mb-3">
                <label for="email" class="form-label">
                    <i class="fas fa-envelope"></i> {{ _('register_email') }}
                </label>
                <input type="email" class="form-control" id="email" name="email" 
                       value="{{ request.form.get('email', '') }}" required>
            </div>

            <div class="mb-3">
                <label for="company" class="form-label">
                    <i class="fas fa-building"></i> {{ _('register_company') }}
                </label>
                <input type="text" class="form-control" id="company" name="company" 
                       value="{{ request.form.get('company', '') }}">
            </div>

            <div class="mb-3">
                <label for="phone" class="form-label">
                    <i class="fas fa-phone"></i> {{ _('register_phone') }}
                </label>
                <input type="tel" class="form-control" id="phone" name="phone" 
                       value="{{ request.form.get('phone', '') }}">
            </div>

            <div class="mb-3">
                <label for="password" class="form-label">
                    <i class="fas fa-lock"></i> {{ _('register_password') }}
                </label>
                <input type="password" class="form-control" id="password" name="password" required>
                <div class="form-text">{{ _('password_too_short') }}</div>
            </div>

            <div class="mb-3">
                <label for="confirm_password" class="form-label">
                    <i class="fas fa-lock"></i> {{ _('register_confirm_password') }}
                </label>
                <input type="password" class="form-control" id="confirm_password" name="confirm_password" required>
            </div>

            <div class="mb-3 form-check">
                <input type="checkbox" class="form-check-input" id="terms" name="terms" required>
                <label class="form-check-label" for="terms">
                    <a href="#" class="text-decoration-none" data-bs-toggle="modal" data-bs-target="#termsModal">{{ _('register_terms') }}</a>
                </label>
            </div>

            <button type="submit" class="btn btn-primary btn-register w-100">
                <i class="fas fa-user-plus"></i> {{ _('register_button') }}
            </button>
        </form>

        <div class="login-link">
            <p class="mb-0">{{ _('already_have_account') }}? 
                <a href="{{ url_for('login') }}" class="text-decoration-none">{{ _('login_button') }}</a>
            </p>
        </div>
    </div>

    <!-- Terms Modal -->
    <div class="modal fade" id="termsModal" tabindex="-1" aria-labelledby="termsModalLabel" aria-hidden="true">
      <div class="modal-dialog modal-lg modal-dialog-scrollable">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="termsModalLabel">📜 iAccess {{ current_language == 'en' and 'Disclaimer and Terms of Use' or 'Sorumluluk Reddi ve Kullanım Koşulları' }}</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">
            {% if current_language == 'en' %}
            <h6>1. Purpose and Use</h6>
            <p>iAccess is an auxiliary control device that allows users to remotely open/close entry systems such as doors, turnstiles, or garages via NFC card, mobile app, or the internet. It only triggers the relevant systems; physical security and authorization remain the user’s or business’s responsibility.</p>
            <h6>2. Security Responsibility</h6>
            <p>iAccess is not a security device. Doors, turnstiles, or garages should be supported by additional measures such as locks, alarms, or security staff. Each user accepts the risks and is responsible for their own security.</p>
            <h6>3. User Responsibilities</h6>
            <ul>
              <li>The user agrees to use the device only in authorized areas.</li>
              <li>The user is responsible for any unlawful actions such as unauthorized access.</li>
              <li>The user accepts that all actions performed via iAccess belong to their own account.</li>
            </ul>
            <h6>4. Limitation of Liability</h6>
            <p>iAccess and its developers are not liable for any security breaches, unauthorized access, theft, damage, or loss resulting from use or non-use of the device. No liability is accepted for delays, outages, or connection problems.</p>
            <h6>5. Acceptance</h6>
            <p>By using iAccess, you declare that you have read, understood, and accepted all the terms above.</p>
            {% else %}
            <h6>1. Cihazın Amacı ve Kullanımı</h6>
            <p>iAccess, kullanıcıların NFC kart, mobil uygulama veya internet üzerinden kapı, turnike, garaj gibi giriş sistemlerini uzaktan açıp kapatmasına imkân sağlayan yardımcı bir kontrol cihazıdır. Cihaz yalnızca ilgili sistemleri tetikler; fiziksel güvenlik ve yetkilendirme tamamen kullanıcı/işletme sorumluluğundadır.</p>
            <h6>2. Güvenlik Sorumluluğu</h6>
            <p>iAccess bir güvenlik cihazı değildir. Kapı, turnike veya garaj güvenliği; kilit, alarm veya güvenlik personeli gibi ek önlemlerle desteklenmelidir. Her kullanıcı, cihaz kullanımından doğabilecek riskleri kabul eder ve kendi güvenliğini sağlamakla yükümlüdür.</p>
            <h6>3. Kullanıcı Sorumlulukları</h6>
            <ul>
              <li>Kullanıcı, cihazı yalnızca yetkili olduğu alanlarda kullanacağını kabul eder.</li>
              <li>Yetkisiz erişim ve benzeri hukuka aykırı işlemlerden kullanıcı sorumludur.</li>
              <li>Kullanıcı, iAccess üzerinden yapılan işlemlerin kendi hesabına ait olduğunu kabul eder.</li>
            </ul>
            <h6>4. Sorumluluğun Sınırlandırılması</h6>
            <p>iAccess ve geliştiricileri; cihazın kullanımı veya kullanılmamasından kaynaklanan güvenlik ihlali, yetkisiz giriş, hırsızlık, zarar veya kayıplardan sorumlu tutulamaz. Çalışmama, gecikme veya bağlantı sorunlarından doğan zararlardan sorumluluk kabul edilmez.</p>
            <h6>5. Kabul</h6>
            <p>iAccess’i kullanarak yukarıdaki tüm koşulları okuduğunuzu, anladığınızı ve kabul ettiğinizi beyan edersiniz.</p>
            {% endif %}
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ _('close') if translations[current_language].get('close') else 'Kapat' }}</button>
          </div>
        </div>
      </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        // Şifre eşleşme kontrolü
        document.getElementById('confirm_password').addEventListener('input', function() {
            const password = document.getElementById('password').value;
            const confirmPassword = this.value;
            const mismatchMsg = {{ _('passwords_dont_match')|tojson }};
            
            if (password !== confirmPassword) {
                this.setCustomValidity(mismatchMsg);
            } else {
                this.setCustomValidity('');
            }
        });

        // Password re-check on change
        document.getElementById('password').addEventListener('input', function() {
            const confirmPassword = document.getElementById('confirm_password');
            if (confirmPassword.value) {
                confirmPassword.dispatchEvent(new Event('input'));
            }
        });
    </script>
</body>
</html> 