{% extends "base.html" %}
{% block title %}Sign in{% endblock %}
{% block content %}
<div class="auth-wrap">
  <div class="auth-top"><span class="logo">{{ icon('cap') }}</span><div><strong>College KT Portal</strong><small>Knowledge Transfer</small></div></div>
  <div class="auth-card">
    <h2>{{ icon('user') }} Sign in</h2>
    <p class="sub">Leads and Users sign in with Google or an emailed code.</p>

    <a class="gbtn {{ '' if google_ready else 'off' }}" href="{{ url_for('google_login') }}"><svg width="18" height="18" viewBox="0 0 48 48" aria-hidden="true"><path fill="#EA4335" d="M24 9.5c3.5 0 6.6 1.2 9.1 3.6l6.8-6.8C35.8 2.4 30.3 0 24 0 14.6 0 6.5 5.4 2.6 13.2l7.9 6.1C12.4 13.6 17.7 9.5 24 9.5z"/><path fill="#4285F4" d="M46.5 24.5c0-1.6-.1-3.1-.4-4.5H24v9h12.7c-.6 3-2.3 5.5-4.8 7.2l7.5 5.8c4.4-4.1 7.1-10.1 7.1-17.5z"/><path fill="#FBBC05" d="M10.5 28.7A14.5 14.5 0 0 1 9.5 24c0-1.6.3-3.2.8-4.7l-7.9-6.1A24 24 0 0 0 0 24c0 3.9.9 7.5 2.6 10.8l7.9-6.1z"/><path fill="#34A853" d="M24 48c6.5 0 11.9-2.1 15.9-5.8l-7.5-5.8c-2.1 1.4-4.9 2.3-8.4 2.3-6.3 0-11.6-4.1-13.5-9.8l-7.9 6.1C6.5 42.6 14.6 48 24 48z"/></svg> Sign in with Google</a>
    {% if not google_ready %}<p class="note err">Google sign-in is not set up yet. Ask the admin.</p>{% endif %}

    {% if otp_on %}
    <div class="sep">or use an email code</div>
    <form method="post" action="{{ url_for('otp_send') }}">
      <input type="hidden" name="csrf" value="{{ csrf_token }}">
      <div class="field">
        <label for="otpEmail" class="req">Registered email</label>
        <div class="input-icon">{{ icon('mail') }}<input name="email" id="otpEmail" type="email" placeholder="name@company.com" required autocomplete="email"></div>
      </div>
      <button class="btn block" style="margin-top:14px" {{ '' if mail_ready else 'disabled' }}>{{ icon('send') }} Send me a code</button>
      <p class="note">{% if mail_ready %}We email a 6-digit code to your registered address. It works once and expires in 10 minutes.{% else %}Email is not set up yet, so codes cannot be sent. Ask the admin.{% endif %}</p>
    </form>
    {% endif %}
    <p class="note" style="margin-top:18px;padding-top:14px;border-top:1px solid var(--line-2)">{{ icon('info') }} You can only sign in with an email address the admin has added.</p>
  </div>
</div>
{% endblock %}