<div class="login-branding">
    <img class="login-logo-image" src="/crm/public/assets/branding/grow-tool-therapies-logo.png"
         alt="Grow Tool Therapies">
</div>

<section class="login-intro">
    <h1>Occupational Therapy CRM</h1>
    <p>Please enter your username and password.</p>
</section>

<?php if (!empty($error)): ?>
    <div class="alert alert-warning login-alert" role="alert"><?= htmlspecialchars($error, ENT_QUOTES, 'UTF-8') ?></div>
<?php endif; ?>

<form method="post" action="/crm/public/login" class="form-stack login-form" novalidate>
    <input type="hidden" name="_csrf" value="<?= htmlspecialchars($csrf, ENT_QUOTES, 'UTF-8') ?>">

    <label class="form-field">
        <span>Username / Email</span>
        <input type="email" name="email" autocomplete="username"
               inputmode="email" placeholder="you@example.com" required autofocus>
    </label>

    <label class="form-field password-field">
        <span>Password</span>
        <div class="password-wrap">
            <input id="login-password" type="password" name="password"
                   autocomplete="current-password" placeholder="Enter your password" required>
            <button class="password-toggle" type="button"
                    data-password-toggle="login-password" aria-label="Show password">Show</button>
        </div>
    </label>

    <button class="btn btn-primary btn-block login-submit" type="submit">Sign in</button>
</form>

<p class="login-link"><a href="/crm/public/forgot-password">Forgot password?</a></p>
