<?php

/**
 * The template for displaying login and registration forms
 *
 * This template can be overridden by copying it to yourtheme/movie-engine/auth/form-login.php.
 *
 * HOWEVER, on occasion MovieEngine will need to update template files and you
 * (the theme developer) will need to copy the new files to your theme to
 * maintain compatibility. We try to do this as little as possible, but it does
 * happen. When this occurs the version of the template file will be bumped and
 * the readme will list any important changes.
 *
 * @note Please do not delete our CSS classes when you customize, as it may break functionality.
 * @package Movie_Engine
 * @subpackage Movie_Engine/templates
 * @version 1.0.0
 * @since 1.0.0
 */

if (! defined("ABSPATH")) {
    exit; // Exit if accessed directly
}

$movie_engine_action = $args['action'] ?? 'login';
?>
<div class="movie-engine-auth-wrapper">
    <div class="movie-engine-auth-container">
        <div class="movie-engine-auth-tabs">
            <button class="movie-engine-auth-tab <?php echo esc_attr($movie_engine_action === 'login' ? 'active' : ''); ?>" data-target="login"><?php esc_html_e('Login', 'cine-movie-engine'); ?></button>
            <?php if (get_option('users_can_register')) : ?>
                <button class="movie-engine-auth-tab <?php echo esc_attr($movie_engine_action === 'register' ? 'active' : ''); ?>" data-target="register"><?php esc_html_e('Register', 'cine-movie-engine'); ?></button>
            <?php endif; ?>
        </div>

        <form id="movie-engine-login-form" class="movie-engine-auth-form <?php echo esc_attr($movie_engine_action === 'login' ? 'active' : ''); ?>" action="javascript:void(0);" onsubmit="return false;">
            <div class="movie-engine-form-group">
                <label><?php esc_html_e('Username or Email', 'cine-movie-engine'); ?></label>
                <input type="text" name="username" required placeholder="<?php esc_html_e('Enter username', 'cine-movie-engine'); ?>">
            </div>
            <div class="movie-engine-form-group">
                <label><?php esc_html_e('Password', 'cine-movie-engine'); ?></label>
                <input type="password" name="password" required placeholder="<?php esc_html_e('Enter password', 'cine-movie-engine'); ?>">
            </div>

            <div class="movie-engine-form-footer">
                <label class="movie-engine-remember">
                    <input type="checkbox" name="remember" checked> <?php esc_html_e('Remember me', 'cine-movie-engine'); ?>
                </label>
                <a href="#" class="movie-engine-forgot-pass-trigger"><?php esc_html_e('Forgot Password?', 'cine-movie-engine'); ?></a>
            </div>

            <button type="submit" class="movie-engine-btn me-btn-primary me-btn-block">
                <span class="btn-text"><?php esc_html_e('Login', 'cine-movie-engine'); ?></span>
                <span class="fa-solid fa-spinner fa-spin me-hidden"></span>
            </button>
            <?php do_action('movie_engine_after_login_form_buttons'); ?>
        </form>

        <?php if (get_option('users_can_register')) : ?>
            <form id="movie-engine-register-form" class="movie-engine-auth-form <?php echo esc_attr($movie_engine_action === 'register' ? 'active' : ''); ?>" action="javascript:void(0);" onsubmit="return false;">
                <div class="movie-engine-form-group">
                    <label><?php esc_html_e('Username', 'cine-movie-engine'); ?></label>
                    <input type="text" name="username" required placeholder="<?php esc_html_e('Choose a username', 'cine-movie-engine'); ?>">
                </div>
                <div class="movie-engine-form-group">
                    <label><?php esc_html_e('Email Address', 'cine-movie-engine'); ?></label>
                    <input type="email" name="email" required placeholder="<?php esc_html_e('Enter your email', 'cine-movie-engine'); ?>">
                </div>
                <div class="movie-engine-form-group">
                    <label><?php esc_html_e('Password', 'cine-movie-engine'); ?></label>
                    <input type="password" name="password" required placeholder="<?php esc_html_e('Create a strong password', 'cine-movie-engine'); ?>">
                </div>

                <button type="submit" class="movie-engine-btn me-btn-primary me-btn-block">
                    <span class="btn-text"><?php esc_html_e('Create Account', 'cine-movie-engine'); ?></span>
                    <span class="fa-solid fa-spinner fa-spin me-hidden"></span>
                </button>
                <?php do_action('movie_engine_after_login_form_buttons'); ?>
            </form>
        <?php endif; ?>

        <form id="movie-engine-lost-password-form" class="movie-engine-auth-form" action="javascript:void(0);" onsubmit="return false;">
            <div class="movie-engine-form-header">
                <h3><?php esc_html_e('Reset Password', 'cine-movie-engine'); ?></h3>
                <p><?php esc_html_e('Enter your username or email and we will send you a link to reset your password.', 'cine-movie-engine'); ?></p>
            </div>
            <div class="movie-engine-form-group">
                <label><?php esc_html_e('Username or Email', 'cine-movie-engine'); ?></label>
                <input type="text" name="user_login" required placeholder="<?php esc_html_e('Enter username or email', 'cine-movie-engine'); ?>">
            </div>

            <button type="submit" class="movie-engine-btn me-btn-primary me-btn-block">
                <span class="btn-text"><?php esc_html_e('Send Reset Link', 'cine-movie-engine'); ?></span>
                <span class="fa-solid fa-spinner fa-spin me-hidden"></span>
            </button>

            <div class="movie-engine-form-footer me-form-footer-center">
                <a href="#" class="movie-engine-back-to-login me-back-link"><span class="fa-solid fa-angle-left"></span> <?php esc_html_e('Back to Login', 'cine-movie-engine'); ?></a>
            </div>
        </form>
        <div class="movie-engine-auth-message"></div>
    </div>
</div>