{% extends "base.html" %}
{% block title %}Sign in{% endblock %}
{% block content %}
<style>
  .gbtn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 10px;
          border: 1px solid #c4c7c5; border-radius: 4px; background: #fff; color: #1f1f1f; font: inherit;
          font-weight: 600; text-decoration: none; }
  .gbtn:hover { background: #f5f7fa; }
  .gbtn.off { opacity: .55; pointer-events: none; }
  .sep { display: flex; align-items: center; gap: 10px; color: #888; margin: 18px 0 8px; font-size: .88em; }
  .sep::before, .sep::after { content: ""; flex: 1; border-top: 1px solid #e0e0e0; }
  .note { font-size: .85em; color: #666; margin: 8px 0 0; }
</style>
<div class="card" style="max-width:400px;margin:60px auto">
  <h2 style="margin-top:0">Sign in</h2>

  <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" style="color:#b3261e">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 }}">
    <label for="otpEmail" style="margin-top:0">Registered email</label>
    <input name="email" id="otpEmail" type="email" placeholder="name@company.com" required autocomplete="email" style="width:100%">
    <p style="margin:10px 0 0"><button class="btn" {{ '' if mail_ready else 'disabled' }}>Send me a code</button></p>
    <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:14px">You can only sign in with an email address the admin has added.</p>
</div>
{% endblock %}