{% extends "_root.html" %}
{% block body %}
<h2>Sign In</h2>
<p>Enter your username and password to sign in to this IndieAuth server.</p>

<div class="demo-users">
  <h3>Demo Users</h3>
  <p>Try these demo accounts to test different profile configurations:</p>
  <ul>
    <li><strong>alice / alice</strong> - Basic profile (name only)</li>
    <li><strong>bob / bob</strong> - Full profile with avatar</li>
    <li><strong>charlie / charlie</strong> - External URL profile</li>
    <li><strong>demo / demo</strong> - Simple profile with bot avatar</li>
  </ul>
</div>

<form method="post" action="/auth">
  <fieldset>
    <label for="username">Username:</label>
    <input type="text" id="username" name="username" required 
           placeholder="Enter username (try: demo)" />
    
    <label for="password">Password:</label>
    <input type="password" id="password" name="password" required 
           placeholder="Enter password (try: demo)" />
    
    <input type="hidden" name="client_id" value="{{ client_id }}" />
    <input type="hidden" name="redirect_uri" value="{{ redirect_uri }}" />
    <input type="hidden" name="state" value="{{ state }}" />
    <input type="hidden" name="code_challenge" value="{{ code_challenge }}" />
    <input type="hidden" name="code_challenge_method" value="{{ code_challenge_method }}" />
    {% if me %}
    <input type="hidden" name="me" value="{{ me }}" />
    {% endif %}
    {% if scope %}
    <input type="hidden" name="scope" value="{{ scope }}" />
    {% endif %}
    
    <button type="submit">Sign In</button>
  </fieldset>
</form>

<style>
.demo-users {
  background: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 0.5rem;
  padding: 1rem;
  margin: 1rem 0;
}
.demo-users h3 {
  margin-top: 0;
  color: #495057;
}
.demo-users ul {
  margin-bottom: 0;
}
.demo-users li {
  margin: 0.25rem 0;
}
</style>
{% endblock %}