{% extends "base.jinja2" %}

{% block title %}Loginween Profile{% endblock %}

{% block nav %}
<li class="nav-item">
    <a class="nav-link" href="/">Home</a>
</li>
<li class="nav-item">
    <a class="nav-link" href="/countdown">Countdown</a>
</li>
<li class="nav-item">
    <a class="nav-link active" aria-current="page" href="/profile">Profile</a>
</li>
<li class="nav-item">
    <a class="nav-link" href="/logout">Logout</a>
</li>
{% endblock %}

{% block body %}

<div class="container my-4">
    <div class="card shadow-sm bg-dark text-light border-secondary">
        <div class="card-body">
            <h2 class="card-title">Profile Overview {% if not logged_in_account %} of {{ username}} {% endif %}</h2>

            {% if logged_in_account %}
                <p class="mb-1">Logged in as: {{ username }}</p>
            {% endif %}
        </div>
    </div>

    {% if logged_in_account %}
    <div class="card shadow-sm mt-4 bg-dark text-light border-secondary">
        <div class="card-body">
            <h4>Change Username</h4>
            <form method="POST" action="/change_username">
                <div class="mb-3">
                    <label for="newusername" class="form-label">New Username</label>
                    <input type="text" class="form-control bg-secondary text-light" id="newusername" name="new_username" placeholder="Enter new username..." required>
                </div>
                <button type="submit" class="btn btn-primary">Update Username</button>
            </form>
        </div>
    </div>

    <div class="card shadow-sm mt-4 bg-dark text-light border-secondary">
        <div class="card-body">
            <h4>Change Pattern</h4>
            <div class="mt-3"></div>
            <form id="change_pattern_form" method="POST" action="/change_pattern">
                <div class="mb-3 d-block">
                    <h5>Current</h5>
                    <input type="hidden" name="current_pattern" id="current_pattern_field">
                    <canvas id="current_pumpkin_canvas" width="600" height="600" class="my-3"></canvas>
                    <div class="buttons">
                        <button type="button" id="currentlightBtn" class="btn btn-warning">Light!</button>
                        <button type="button" id="currentclearBtn" class="btn btn-danger me-2">Clear</button>
                    </div>
                </div>
                <div class="mt-3"></div>
                <div class="mb-3 d-block">
                    <h5>New</h5>
                    <input type="hidden" name="new_pattern" id="new_pattern_field">
                    <canvas id="new_pumpkin_canvas" width="600" height="600" class="my-3"></canvas>
                    <div class="buttons">
                        <button type="button" id="newlightBtn" class="btn btn-warning">Light!</button>
                        <button type="button" id="newclearBtn" class="btn btn-danger me-2">Clear</button>
                    </div>
                </div>
                
                <button type="submit" class="btn btn-primary">Update Pattern</button>
            </form>
        </div>
    </div>

    <div class="card shadow-sm mt-4 border-danger bg-dark text-light">
        <div class="card-body">
            <h4 class="text-danger">Danger Zone</h4>
            <p class="text-muted">These actions cannot be undone!</p>
            <form method="POST" action="/delete_account" class="d-inline">
                <button type="submit" class="btn btn-danger me-2" onclick="return confirm('Are you sure you want to delete your account?');">Delete Account</button>
            </form>
        </div>
    </div>
    {% endif %}
</div>

<script>
setup_pumpkin("current_pumpkin_canvas", "currentclearBtn", "currentlightBtn", "change_pattern_form", "current_pattern_field", {{ grid_size }})
setup_pumpkin("new_pumpkin_canvas", "newclearBtn", "newlightBtn", "change_pattern_form", "new_pattern_field", {{ grid_size }})
</script>
{% endblock body %}