<?php
// Prevent direct access.
defined( 'ABSPATH' ) || exit;
// $error is passed from render_login().
?>
<div class="lsc-login-wrap">
    <div class="lsc-login-box">

        <div class="lsc-login-logo">
            <svg viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
                <rect width="40" height="40" rx="12" fill="#2563eb"/>
                <path d="M28 14C28 13.4696 27.7893 12.9609 27.4142 12.5858C27.0391 12.2107 26.5304 12 26 12H14C13.4696 12 12.9609 12.2107 12.5858 12.5858C12.2107 12.9609 12 13.4696 12 14V22C12 22.5304 12.2107 23.0391 12.5858 23.4142C12.9609 23.7893 13.4696 24 14 24H18L20 28L22 24H26C26.5304 24 27.0391 23.7893 27.4142 23.4142C27.7893 23.0391 28 22.5304 28 22V14Z" fill="white"/>
            </svg>
            <span><?php esc_html_e( 'Live Support Chat', 'live-support-chat' ); ?></span>
        </div>

        <h2><?php esc_html_e( 'Chatter Login', 'live-support-chat' ); ?></h2>

        <?php if ( ! empty( $error ) ) : ?>
            <div class="lsc-alert lsc-alert-error" role="alert">
                <?php echo esc_html( $error ); ?>
            </div>
        <?php endif; ?>

        <form method="post" class="lsc-login-form" id="lsc-login-form"
              action="<?php echo esc_url( get_permalink() ); ?>">

            <?php wp_nonce_field( 'lsc_login', 'lsc_login_nonce' ); ?>

            <div class="lsc-form-group">
                <label for="lsc-uname">
                    <?php esc_html_e( 'Username or Email', 'live-support-chat' ); ?>
                </label>
                <input
                    type="text"
                    id="lsc-uname"
                    name="lsc_username"
                    class="lsc-form-control"
                    required
                    autocomplete="username"
                    autofocus
                />
            </div>

            <div class="lsc-form-group">
                <label for="lsc-pass">
                    <?php esc_html_e( 'Password', 'live-support-chat' ); ?>
                </label>
                <input
                    type="password"
                    id="lsc-pass"
                    name="lsc_password"
                    class="lsc-form-control"
                    required
                    autocomplete="current-password"
                />
            </div>

            <button type="submit" name="lsc_login_submit" value="1"
                    class="lsc-btn lsc-btn-primary lsc-btn-full">
                <?php esc_html_e( 'Sign In', 'live-support-chat' ); ?>
                <svg viewBox="0 0 20 20" fill="currentColor" width="16" height="16" aria-hidden="true">
                    <path fill-rule="evenodd" d="M3 10a.75.75 0 01.75-.75h10.638L10.23 5.29a.75.75 0 111.04-1.08l5.5 5.25a.75.75 0 010 1.08l-5.5 5.25a.75.75 0 11-1.04-1.08l4.158-3.96H3.75A.75.75 0 013 10z" clip-rule="evenodd" />
                </svg>
            </button>

        </form>
    </div>
</div>
