{% extends 'base.html' %}
{% block title %}Login{% endblock %}
{% block auth_content %}
<div class="auth-box">
  <div class="auth-logo">
    <svg width="34" height="34" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
      <path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"/>
    </svg>
  </div>
  <h1 class="auth-title">FBAutoPoster</h1>
  <p class="auth-subtitle">Schedule &amp; automate your Facebook Page posts<br>across multiple pages effortlessly.</p>

  <form method="POST" action="{{ url_for('auth.index') }}" style="margin-bottom:24px;text-align:left;">
    <div class="form-group">
      <label class="form-label" for="email">Email Address</label>
      <input type="email" id="email" name="email" class="form-control" required placeholder="admin@example.com" autofocus />
    </div>
    <div class="form-group">
      <label class="form-label" for="password">Password</label>
      <input type="password" id="password" name="password" class="form-control" required placeholder="••••••••" />
    </div>
    <button type="submit" class="btn btn-primary" style="width:100%;justify-content:center;margin-top:8px">
      Sign In
    </button>
  </form>

  <div class="auth-features">
    <div class="auth-feature"><svg class="auth-feature-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="20 6 9 17 4 12"/></svg> Manage multiple Facebook Pages</div>
    <div class="auth-feature"><svg class="auth-feature-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="20 6 9 17 4 12"/></svg> Schedule posts: once, daily, weekly, monthly, random</div>
    <div class="auth-feature"><svg class="auth-feature-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="20 6 9 17 4 12"/></svg> Calendar view with drag &amp; drop rescheduling</div>
    <div class="auth-feature"><svg class="auth-feature-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="20 6 9 17 4 12"/></svg> Bulk import via CSV</div>
    <div class="auth-feature"><svg class="auth-feature-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="20 6 9 17 4 12"/></svg> Image, video &amp; link posts with caption variations</div>
  </div>
</div>
{% endblock %}