<?php include_once '../template/lang.php'; ?>
<!DOCTYPE html>
<html lang="<?php echo h(current_lang()); ?>">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?php echo tr('Admin Registration — UK Trail Run 2026', 'Pendaftaran Admin — UK Trail Run 2026'); ?></title>
    <meta name="description" content="Admin registration portal for UK Trail Run 2026 event management.">
    <link rel="icon" type="image/png" href="../assets/img/logo.png">
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@500;700;800;900&family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="assets/css/admin.css">
</head>
<body>
    <div class="login-bg">
        <!-- Language Switcher -->
        <div style="position: absolute; top: 24px; right: 24px; z-index: 10;">
            <div class="language-switch" style="border-color: rgba(255,255,255,0.2); background: rgba(255,255,255,0.05); backdrop-filter: blur(8px);">
                <a href="?lang=en" class="language-switch__link <?php echo current_lang() === 'en' ? 'is-active' : ''; ?>" style="font-size: 0.7rem; padding: 6px 10px;">EN</a>
                <span style="color: rgba(255,255,255,0.3); font-size: 0.7rem;">/</span>
                <a href="?lang=id" class="language-switch__link <?php echo current_lang() === 'id' ? 'is-active' : ''; ?>" style="font-size: 0.7rem; padding: 6px 10px;">ID</a>
            </div>
        </div>


        <!-- Brand -->
        <div class="login-brand">
            <div class="login-brand__logo">
                <img src="../assets/img/logo.png" alt="UK Trail Run 2026">
            </div>
            <span class="login-brand__name">UK Trail Run 2026</span>
            <span class="login-brand__sub"><?php echo tr('Event Administration Portal', 'Portal Administrasi Acara'); ?></span>
        </div>

        <!-- Register Card -->
        <div class="login-card">
            <div class="login-card__accent"></div>


            <h1 class="login-card__title"><?php echo tr('Create Account', 'Buat Akun'); ?></h1>
            <p class="login-card__desc"><?php echo tr('Register for a new admin account to manage the event.', 'Daftar akun admin baru untuk mengelola acara.'); ?></p>

            <!-- Error message (hidden by default) -->
            <div class="login-error" id="registerError">
                <?php echo tr('Please fill out all required fields correctly.', 'Harap isi semua kolom yang diperlukan dengan benar.'); ?>
            </div>

            <form id="registerForm" novalidate>
                <div class="login-field">
                    <label class="login-label" for="registerName"><?php echo tr('Full Name', 'Nama Lengkap'); ?></label>
                    <div class="login-input-wrap">
                        <input type="text" id="registerName" class="login-input" placeholder="<?php echo tr('John Doe', 'John Doe'); ?>" required>
                        <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
                    </div>
                </div>

                <div class="login-field">
                    <label class="login-label" for="registerEmail"><?php echo tr('Email Address', 'Alamat Email'); ?></label>
                    <div class="login-input-wrap">
                        <input type="email" id="registerEmail" class="login-input" placeholder="<?php echo tr('admin@uktrailrun.com', 'admin@uktrailrun.com'); ?>" autocomplete="email" required>
                        <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 4h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2Z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>
                    </div>
                </div>

                <div class="login-field">
                    <label class="login-label" for="registerPassword"><?php echo tr('Password', 'Kata Sandi'); ?></label>
                    <div class="login-input-wrap">
                        <input type="password" id="registerPassword" class="login-input" placeholder="<?php echo tr('Create a password', 'Buat kata sandi'); ?>" autocomplete="new-password" required>
                        <svg viewBox="0 0 24 24" aria-hidden="true"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect><path d="M7 11V7a5 5 0 0 1 10 0v4"></path></svg>
                        <button type="button" class="toggle-pw" id="toggleRegisterPw" aria-label="Toggle password visibility">
                            <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8Z"></path><circle cx="12" cy="12" r="3"></circle></svg>
                        </button>
                    </div>
                </div>

                <div class="login-field">
                    <label class="login-label" for="registerConfirmPassword"><?php echo tr('Confirm Password', 'Konfirmasi Kata Sandi'); ?></label>
                    <div class="login-input-wrap">
                        <input type="password" id="registerConfirmPassword" class="login-input" placeholder="<?php echo tr('Confirm your password', 'Konfirmasi kata sandi Anda'); ?>" autocomplete="new-password" required>
                        <svg viewBox="0 0 24 24" aria-hidden="true"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect><path d="M7 11V7a5 5 0 0 1 10 0v4"></path></svg>
                        <button type="button" class="toggle-pw" id="toggleConfirmPw" aria-label="Toggle password visibility">
                            <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8Z"></path><circle cx="12" cy="12" r="3"></circle></svg>
                        </button>
                    </div>
                </div>

                <div class="login-options" style="margin-bottom: 20px;">
                    <label class="login-remember">
                        <input type="checkbox" id="agreeTerms" required>
                        <span><?php echo tr('I agree to the', 'Saya setuju dengan'); ?> <a href="#" style="color: var(--accent); text-decoration: none;"><?php echo tr('Terms & Conditions', 'Syarat & Ketentuan'); ?></a></span>
                    </label>
                </div>

                <button type="submit" class="login-btn" id="registerBtn">
                    <?php echo tr('Register', 'Daftar'); ?>
                    <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12h14M12 5l7 7-7 7"></path></svg>
                </button>
            </form>

            <div class="login-divider"><span>or</span></div>

            <div class="login-back">
                <a href="login.php">
                    <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M15 18l-6-6 6-6"></path></svg>
                    <?php echo tr('Back to login', 'Kembali ke masuk'); ?>
                </a>
            </div>
        </div>

        <p class="login-footer">&copy; 2026 UK Trail Run. <?php echo tr('All rights reserved.', 'Hak cipta dilindungi.'); ?></p>
    </div>

    <script src="assets/js/admin.js"></script>
</body>
</html>
