{% extends "base.html" %}

{% block title %}Add Player - DigiServer v2{% endblock %}

{% block content %}
<style>
    .form-group {
        margin-bottom: 1rem;
    }
    
    .form-group label {
        font-weight: bold;
        display: block;
        margin-bottom: 0.5rem;
    }
    
    body.dark-mode .form-group label {
        color: #e2e8f0;
    }
    
    .form-control {
        width: 100%;
        padding: 0.5rem;
        border: 1px solid #ddd;
        border-radius: 4px;
    }
    
    body.dark-mode .form-control {
        background: #1a202c;
        border-color: #4a5568;
        color: #e2e8f0;
    }
    
    body.dark-mode .form-control:focus {
        border-color: #7c3aed;
        outline: none;
    }
    
    .form-help {
        color: #6c757d;
        font-size: 0.875rem;
    }
    
    body.dark-mode .form-help {
        color: #718096;
    }
    
    .section-header {
        margin-top: 2rem;
        padding-bottom: 0.5rem;
        border-bottom: 2px solid;
    }
    
    .section-header.blue {
        border-color: #007bff;
    }
    
    body.dark-mode .section-header.blue {
        border-color: #667eea;
    }
    
    .section-header.green {
        border-color: #28a745;
    }
    
    body.dark-mode .section-header.green {
        border-color: #48bb78;
    }
    
    .section-header.yellow {
        border-color: #ffc107;
    }
    
    body.dark-mode .section-header.yellow {
        border-color: #ecc94b;
    }
    
    body.dark-mode h1,
    body.dark-mode h3,
    body.dark-mode h4 {
        color: #e2e8f0;
    }
    
    body.dark-mode p {
        color: #a0aec0;
    }
    
    .info-box {
        background-color: #e7f3ff;
        border-left: 4px solid #007bff;
        padding: 1rem;
        margin: 2rem 0;
    }
    
    body.dark-mode .info-box {
        background-color: #1a365d;
        border-left-color: #667eea;
    }
    
    .info-box h4 {
        margin-top: 0;
        color: #007bff;
    }
    
    body.dark-mode .info-box h4 {
        color: #667eea;
    }
    
    .info-box code {
        background: #f4f4f4;
        padding: 2px 6px;
        border-radius: 3px;
    }
    
    body.dark-mode .info-box code {
        background: #2d3748;
        color: #e2e8f0;
    }
    
    body.dark-mode small {
        color: #718096;
    }
</style>
<div class="container" style="max-width: 800px; margin-top: 2rem;">
    <h1>Add New Player</h1>
    <p style="color: #6c757d; margin-bottom: 2rem;">
        Create a new digital signage player with authentication credentials
    </p>

    <div class="card">
        <form method="POST">
            <h3 class="section-header blue" style="margin-top: 0;">
                Basic Information
            </h3>
            
            <div class="form-group">
                <label>Display Name *</label>
                <input type="text" name="name" required class="form-control"
                       placeholder="e.g., Office Reception Player">
                <small class="form-help">Friendly name for the player</small>
            </div>

            <div class="form-group">
                <label>Hostname *</label>
                <input type="text" name="hostname" required class="form-control"
                       placeholder="e.g., office-player-001">
                <small class="form-help">
                    Unique identifier for this player (must match screen_name in player config)
                </small>
            </div>

            <div class="form-group">
                <label>Location</label>
                <input type="text" name="location" class="form-control"
                       placeholder="e.g., Main Office - Reception Area">
                <small class="form-help">Physical location of the player (optional)</small>
            </div>

            <h3 class="section-header green">
                Authentication
            </h3>
            <p class="form-help" style="margin-bottom: 1rem;">
                Choose one authentication method (Quick Connect recommended for easy setup)
            </p>

            <div class="form-group">
                <label>Password</label>
                <input type="password" name="password" id="password" class="form-control"
                       placeholder="Leave empty to use Quick Connect only">
                <small class="form-help">
                    Secure password for player authentication (optional if using Quick Connect)
                </small>
            </div>

            <div class="form-group">
                <label>Quick Connect Code *</label>
                <input type="text" name="quickconnect_code" required class="form-control"
                       placeholder="e.g., OFFICE123">
                <small class="form-help">
                    Easy pairing code for quick setup (must match quickconnect_key in player config)
                </small>
            </div>

            <h3 class="section-header yellow">
                Display Settings
            </h3>

            <div class="form-group">
                <label>Orientation</label>
                <select name="orientation" class="form-control">
                    <option value="Landscape" selected>Landscape</option>
                    <option value="Portrait">Portrait</option>
                </select>
                <small class="form-help">Display orientation for the player</small>
            </div>

            <div class="form-group">
                <label>Assign Playlist</label>
                <select name="playlist_id" class="form-control">
                    <option value="">No Playlist (Unassigned)</option>
                    {% for playlist in playlists %}
                    <option value="{{ playlist.id }}">{{ playlist.name }} ({{ playlist.orientation }}) - {{ playlist.content_count }} items</option>
                    {% endfor %}
                </select>
                <small class="form-help">Assign player to a playlist (optional)</small>
            </div>

            <div class="info-box">
                <h4>📋 Setup Instructions</h4>
                <ol style="margin: 0.5rem 0; padding-left: 1.5rem;">
                    <li>Create the player with the form above</li>
                    <li>Note the generated <strong>Auth Code</strong> (shown after creation)</li>
                    <li>Configure the player's <code>app_config.json</code> with:
                        <ul style="margin-top: 0.5rem;">
                            <li><code>server_ip</code>: Your server address</li>
                            <li><code>screen_name</code>: Same as <strong>Hostname</strong> above</li>
                            <li><code>quickconnect_key</code>: Same as <strong>Quick Connect Code</strong> above</li>
                        </ul>
                    </li>
                    <li>Start the player - it will authenticate automatically</li>
                </ol>
            </div>

            <div style="margin-top: 2rem; padding-top: 1rem; border-top: 1px solid #ddd;">
                <button type="submit" class="btn btn-success" style="padding: 0.75rem 2rem;">
                    ✓ Create Player
                </button>
                <a href="{{ url_for('players.list') }}" class="btn" style="padding: 0.75rem 2rem; margin-left: 1rem;">
                    Cancel
                </a>
            </div>
        </form>
    </div>
</div>
{% endblock %}