{% extends "base/layout.html" %}
{% block main %}
{{ super() }}

<div>
    <h1>Schedule for <u>{{callback.name}}</u></h1>

    <button onclick="window.location.href='{{ url_for('callback',  uuid=callback.uuid) }}';">Back</button>

    <form action="{{url_for('create_schedule', uuid=callback.uuid) }}" method="POST" id="callback-form">

        <h3>Create new schedule</h3>
        <p>
            <label for="name">Name</label><br>
            <input type="text" name="name" maxlength="64" required><br>
        </p>
        <p>
            <label for="startday">Start day</label><br>
            <select name="startday" id="startday-select"> 
                    <option value="0">Monday</option>
                    <option value="1">Tuesday</option>
                    <option value="2">Wednesday</option>
                    <option value="3">Thursday</option>
                    <option value="4">Friday</option>
                    <option value="5">Saturday</option>
                    <option value="6">Sunday</option>
            </select>

            <label for="starttime">Start time</label><br>
            <input type="time" name="starttime">
        </p>

        <p>
            <label for="endday">End day</label><br>
            <select name="endday" id="endday-select"> 
                    <option value="0">Monday</option>
                    <option value="1">Tuesday</option>
                    <option value="2">Wednesday</option>
                    <option value="3">Thursday</option>
                    <option value="4">Friday</option>
                    <option value="5">Saturday</option>
                    <option value="6">Sunday</option>
            </select>

            <label for="endtime">End time</label><br>
            <input type="time" name="endtime">
        </p>

        <input type="submit" value="Submit">
    </form>

    <h3>Current schedules</h3>
    <p>
        {% if schedules.count() > 0 %}
        <table>
            <tr>
                <th>Name</th>
                <th>Start time</th>
                <th>End time</th>
                <th>Delete</th>
            </tr>
            {% for schedule in schedules %}
            <tr>
                <td>{{schedule.name}}</td>
                <td>{{schedule.startday_str()}} {{schedule.start_time}}</td>
                <td>{{schedule.endday_str()}} {{schedule.end_time}}</td>
                <td><button onclick="window.location.href='{{ url_for('delete_schedule',  id=schedule.id) }}';">Delete</button></td>
            </tr>
            {% endfor %}
        </table>
        {% else %}
            There are no schedules set.
        {% endif %}
    </p>
    
</div>

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