{% extends "base.html" %}

{% block title %}Goals - GoalsBreakDown{% endblock %}

{% block extra_css %}
<link rel="stylesheet" href="{{ url_for('static', filename='css/goals.css') }}">
{% endblock %}

{% block content %}
<div class="goals-page">
    <div class="goals-header">
        <h1>My Goals</h1>
        <button id="create-goal-btn" class="btn-success">+ Create Goal</button>
    </div>
    <div id="goals-list" class="goals-list"></div>
</div>

<div id="goal-modal" class="modal">
    <div class="modal-content">
        <div class="modal-header">
            <h2 id="modal-title">Create Goal</h2>
            <button class="modal-close" id="modal-close">&times;</button>
        </div>
        <form id="goal-form" autocomplete="off">
            <input type="hidden" id="goal-id">
            <div class="form-group">
                <label for="goal-title">Goal Title</label>
                <input type="text" id="goal-title" required>
            </div>
            <div id="goal-error" class="error-message"></div>
            <div class="modal-actions">
                <button type="submit" class="btn-primary">Save</button>
                <button type="button" class="btn-secondary" id="modal-cancel">Cancel</button>
            </div>
        </form>
    </div>
</div>

<div id="delete-confirm-modal" class="modal">
    <div class="modal-content">
        <div class="modal-header">
            <h2>Confirm Delete</h2>
            <button class="modal-close" id="delete-modal-close">&times;</button>
        </div>
        <p>Are you sure you want to delete this goal? All associated tasks will also be deleted.</p>
        <div class="modal-actions">
            <button class="btn-danger" id="confirm-delete">Delete</button>
            <button class="btn-secondary" id="cancel-delete">Cancel</button>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script src="{{ url_for('static', filename='js/goals.js') }}"></script>
{% endblock %}