{% extends "base.html" %}
{% load static %}

{% block title %}Wortuhr Controller{% endblock %}

{% block head %}
<style>
    :root {
        --bg-dark-navy: #1a1a2e;
        --text-light-gray: #e0e0e0;
        --accent-teal: #16c79a;
        --accent-orange: #f39c12;
        --font-headings: 'Roboto', sans-serif;
        --font-body: 'Open Sans', sans-serif;
    }

    body {
        background-color: var(--bg-dark-navy);
        color: var(--text-light-gray);
        font-family: var(--font-body);
    }

    .hero {
        background: linear-gradient(45deg, #1a1a2e, #16213e);
        padding: 4rem 0;
        text-align: center;
    }

    h1, h2, h3 {
        font-family: var(--font-headings);
        font-weight: 700;
        color: var(--accent-teal);
    }

    .section {
        padding: 4rem 0;
    }

    .card {
        background-color: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.1);
        color: var(--text-light-gray);
    }

    .form-control {
        background-color: rgba(255, 255, 255, 0.1);
        border: 1px solid rgba(255, 255, 255, 0.2);
        color: var(--text-light-gray);
    }

    .form-control:focus {
        background-color: rgba(255, 255, 255, 0.15);
        border-color: var(--accent-teal);
        color: var(--text-light-gray);
        box-shadow: 0 0 0 0.25rem rgba(22, 199, 154, 0.25);
    }

    .btn-primary {
        background-color: var(--accent-teal);
        border-color: var(--accent-teal);
    }

    .btn-primary:hover {
        background-color: #13b48a;
        border-color: #13b48a;
    }

    .live-preview {
        height: 300px;
        background-color: rgba(0,0,0,0.2);
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 0.25rem;
    }
</style>
{% endblock %}

{% block content %}
<div class="hero">
    <div class="container">
        <h1>Wortuhr Controller</h1>
        <p class="lead">Configure and control Word Clock.</p>
    </div>
</div>

<div class="container section">
    <div class="row g-5">
        <div class="col-lg-6">
            <h2>Configuration</h2>
            <div class="card">
                <div class="card-body">
                    <form>
                        <div class="mb-3">
                            <label for="ssid" class="form-label">WLAN SSID</label>
                            <input type="text" class="form-control" id="ssid" placeholder="Enter your Wi-Fi name">
                        </div>
                        <div class="mb-3">
                            <label for="password" class="form-label">Password</label>
                            <input type="password" class="form-control" id="password">
                        </div>
                        <div class="mb-3">
                            <label for="location" class="form-label">Location</label>
                            <select class="form-select" id="location">
                                <option selected>Choose...</option>
                                <option value="1">Berlin</option>
                                <option value="2">New York</option>
                                <option value="3">Tokyo</option>
                            </select>
                        </div>
                        <button type="submit" class="btn btn-primary">Save Configuration</button>
                    </form>
                </div>
            </div>
        </div>
        <div class="col-lg-6">
            <h2>Live Preview</h2>
            <div class="live-preview">
                <p class="text-muted">Live clock display will appear here.</p>
            </div>
        </div>
    </div>
</div>
{% endblock %}
