{% extends "base.html" %}
{% block title %}Login — TtsToy{% endblock %}
{% block content %}
<div style="max-width:380px;margin:5rem auto;">
  <div class="card">
    <div style="text-align:center;margin-bottom:1.25rem;">
      <div style="font-size:1.3rem;font-weight:200;color:#e0ecff;letter-spacing:3px;text-shadow:0 0 20px rgba(80,160,255,0.2);">TTSTOY</div>
      <div class="muted" style="margin-top:0.3rem;">Web Interface</div>
    </div>

    {% with messages = get_flashed_messages(with_categories=true) %}
      {% for cat, msg in messages %}
        <div class="alert alert-{{ cat }}">{{ msg }}</div>
      {% endfor %}
    {% endwith %}

    <div class="alert alert-info" style="margin-bottom:1.25rem;font-size:0.8rem;line-height:1.5;">
      Run <code>[p]login</code> in Discord.<br>
      The bot will DM you a one-time key.<br>
      Paste it below and click Login.
    </div>

    <form method="POST" action="{{ url_for('login_submit') }}">
      <div class="form-group">
        <label for="token">One-time login key</label>
        <input type="text" id="token" name="token" placeholder="Paste your key here" autocomplete="off" autofocus>
      </div>
      <button type="submit" class="btn btn-primary" style="width:100%;justify-content:center;padding:0.6rem;">Login</button>
    </form>
  </div>
</div>
{% endblock %}