{% extends 'base.html.twig' %}

{% block title %}Add Calendar{% endblock %}

{% block body %}
    <div class="container mt-4">
        <h1>Add Calendar</h1>
        
        {% for label, messages in app.flashes %}
            {% for message in messages %}
                <div class="alert alert-{{ label }}">
                    {{ message }}
                </div>
            {% endfor %}
        {% endfor %}
        
        <div class="card mb-4">
            <div class="card-header">
                <h5>Add New Calendar</h5>
            </div>
            <div class="card-body">
                <form action="{{ path('calendar_add_post') }}" method="post">
                    <div class="mb-3">
                        <label for="name" class="form-label">Calendar Name</label>
                        <input type="text" class="form-control" id="name" name="name" required>
                    </div>
                    <div class="mb-3">
                        <label for="url" class="form-label">Calendar URL</label>
                        <input type="url" class="form-control" id="url" name="url" required 
                               placeholder="webcal://p##-caldav.icloud.com/published/2/...">
                        <div class="form-text">
                            For Apple Calendar, use the webcal URL from iCloud.com Calendar sharing options.
                        </div>
                    </div>
                    <button type="submit" class="btn btn-primary">Add Calendar</button>
                </form>
            </div>
        </div>
        
        <div class="card">
            <div class="card-header">
                <h5>How to find your Apple Calendar webcal URL</h5>
            </div>
            <div class="card-body">
                <ol>
                    <li>Open Calendar app on your Mac or go to iCloud.com and open Calendar</li>
                    <li>Right-click on the calendar you want to share</li>
                    <li>Select "Share Calendar..." option</li>
                    <li>Check "Public Calendar"</li>
                    <li>Copy the URL that appears (it should start with webcal://)</li>
                    <li>Paste it in the form above</li>
                </ol>
            </div>
        </div>
    </div>
{% endblock %}