<div class="login-form-container">
    <?php if ( $attributes['show_title'] ) : ?>
        <h2 class="login-title"><?php _e( 'Sign In', 'ones-auth' ); ?></h2>
    <?php endif; ?>

    <!-- Show errors if there are any -->
    <?php if ( count( $attributes['errors'] ) > 0 ) : ?>
        <div class="login-errors">
            <?php foreach ( $attributes['errors'] as $error ) : ?>
                <p class="login-error"><?php echo $error; ?></p>
            <?php endforeach; ?>
        </div>
    <?php endif; ?>

    <!-- Show logged out message if user just logged out -->
    <?php if ( $attributes['logged_out'] ) : ?>
        <p class="login-info"><?php _e( 'You have signed out.<br/>Would you like to sign in again?', 'ones-auth' ); ?></p>
    <?php endif; ?>

    <form id="loginform" action="<?php echo esc_url( wp_login_url() ); ?>" method="post">
        <div class="form-group">
            <label for="user_login" id="user_login_label"><?php _e( 'OnesID', 'ones-auth' ); ?></label>
            <input type="text" name="log" id="user_login" class="form-control" value="" autocapitalize="off" autocomplete="username" required>
        </div>

        <div id="password-field" class="form-group" style="display: none;">
            <label for="user_pass"><?php _e( 'Password', 'ones-auth' ); ?></label>
            <input type="password" name="pwd" id="user_pass" class="form-control" value="" autocomplete="current-password">
        </div>

        <div class="form-group">
            <label class="checkbox-label" for="login-type-toggle">
                <input type="checkbox" id="login-type-toggle" name="login_type" value="default">
                <span><?php _e( 'Login with WordPress user', 'ones-auth' ); ?></span>
            </label>
        </div>

        <?php do_action( 'login_form' ); ?>

        <div class="form-group">
            <button type="submit" name="wp-submit" id="wp-submit" class="button button-primary button-large">
                <?php esc_html_e( 'Sign In', 'ones-auth' ); ?>
            </button>
            <input type="hidden" name="redirect_to" value="<?php echo esc_attr( $attributes['redirect'] ); ?>">
        </div>
    </form>

    <div id="login-loading" style="display: none;">
        <p><?php _e( 'Confirm login on OnesID mobile application ...', 'ones-auth' ); ?></p>
        <div class="spinner"></div>
    </div>
</div>

<style>
    .login-form-container {
        max-width: 400px;
        margin: 0 auto;
        padding: 20px;
        background-color: #f9f9f9;
        border-radius: 5px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    }
    .login-title {
        text-align: center;
        margin-bottom: 20px;
        color: #333;
    }
    .login-errors {
        background-color: #f8d7da;
        border: 1px solid #f5c6cb;
        color: #721c24;
        padding: 10px;
        margin-bottom: 20px;
        border-radius: 3px;
    }
    .login-error {
        margin: 0;
    }
    .login-info {
        background-color: #d4edda;
        border: 1px solid #c3e6cb;
        color: #155724;
        padding: 10px;
        margin-bottom: 20px;
        border-radius: 3px;
    }
    .form-group {
        margin-bottom: 15px;
    }
    .form-group label {
        display: block;
        margin-bottom: 5px;
        color: #333;
    }
    .form-control {
        width: 100%;
        padding: 8px;
        border: 1px solid #ddd;
        border-radius: 3px;
        font-size: 16px;
        box-sizing: border-box; /* Add this line */
    }
    .checkbox-label {
        display: flex;
        align-items: center;
        cursor: pointer;
    }
    .checkbox-label input {
        margin-right: 10px;
    }
    .button {
        display: inline-block;
        width: 100%; /* Make button full width */
        padding: 10px 20px;
        background-color: #0073aa;
        color: #fff;
        border: none;
        border-radius: 3px;
        font-size: 16px;
        cursor: pointer;
        transition: background-color 0.3s;
        box-sizing: border-box; /* Add this line */
    }
    .button:hover {
        background-color: #005177;
    }
    #login-loading {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(255, 255, 255, 0.9);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        z-index: 9999;
    }
    .spinner {
        border: 4px solid #f3f3f3;
        border-top: 4px solid #3498db;
        border-radius: 50%;
        width: 40px;
        height: 40px;
        animation: spin 1s linear infinite;
    }
    @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }
</style>


<script>
document.getElementById('login-type-toggle').addEventListener('change', function() {
    var passwordField = document.getElementById('password-field');
    var userLoginLabel = document.getElementById('user_login_label');
    var userLoginInput = document.getElementById('user_login');
    
    if (this.checked) {
        passwordField.style.display = 'block';
        userLoginLabel.textContent = '<?php _e( 'Username', 'ones-auth' ); ?>';
        userLoginInput.setAttribute('pattern', '.*');
        userLoginInput.removeAttribute('title');
    } else {
        passwordField.style.display = 'none';
        userLoginLabel.textContent = '<?php _e( 'OnesID', 'ones-auth' ); ?>';
        userLoginInput.setAttribute('pattern', '.*@.*');
        userLoginInput.setAttribute('title', 'OnesID must contain an @ symbol');
    }
});

document.getElementById('loginform').addEventListener('submit', function(e) {
    var userLoginInput = document.getElementById('user_login');
    var loginTypeToggle = document.getElementById('login-type-toggle');
    
    if (!loginTypeToggle.checked && !userLoginInput.value.includes('@')) {
        e.preventDefault();
        alert('OnesID must contain an @ symbol');
        return;
    }
    
    e.preventDefault();
    document.getElementById('login-loading').style.display = 'flex';
    
    var formData = new FormData(this);
    
    if (!loginTypeToggle.checked) {
        formData.delete('pwd');
    }
    
    fetch(this.action, {
        method: 'POST',
        body: formData,
        redirect: 'follow'
    })
    .then(response => {
        if (response.redirected) {
            window.location.href = response.url;
        } else {
            return response.text();
        }
    })
    .then(html => {
        if (html) {
            document.open();
            document.write(html);
            document.close();
        }
    })
    .catch(error => {
        console.error('Error:', error);
    })
    .finally(() => {
        document.getElementById('login-loading').style.display = 'none';
    });
});
</script>