<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src='/static/js/moment.min.js'></script>
    <style>
        body{
            font-family: Verdana, "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
        }
        .selected {
            background: #8CF;
        }
        button.schedule {
            margin-top: 10px;
            padding: 8px 12px;
            line-height: 20px;
            font-size: 18px;
            border-radius: 3px;
            background: #FFF;
            border: 1px solid #CCC;
        }
    </style>
</head>
<body>
<h1>Confirm event scheduling</h1>
    <div style="border:1px solid #eee;border-radius:3px;padding:10px">
        <div style="padding:0 5px">
            <div style="font-weight:bold;font-size:18px">{{ event.title }}</div>
            <div>{{ event.location }}</div>
            <div>{{ event.description }}</div>
            <span style="font-size:13px;color:#aaa">Click to choose another time:</span>
        </div>
        <div style="display:flex;flex-wrap:wrap;padding:10px 0" id="days-container"></div>
    </div>

    <form action="/event/{{selected_key}}" method="post">
        <button type="submit" class="schedule">Schedule!</button>
    </form>


    <script>
        events = {{ times_json|tojson|safe }}
        console.log(events[0].start,events[0].end)
        times = events.map(function(e) {
            return {
                date: moment(e.start*1000).local().format("dddd, MMM Do"),
                time: moment(e.start*1000).local().format("h:mma") + "-" +
                      moment(e.end*1000).local().format("h:mma"),
                serverKey: e.key
            };
        });

        byDay = {};
        times.forEach(function(t){
            if(byDay[t.date] === undefined)
                byDay[t.date] = [];
            byDay[t.date].push(t);
        });

        daysContainer = document.getElementById("days-container");
        for(var dayText in byDay){
            var dayTimes = byDay[dayText];

            var block = document.createElement("div");
            block.setAttribute("style","flex-grow:1;margin:5px;border:1px solid #ddd;border-radius:3px");
            daysContainer.appendChild(block);

            var title = document.createElement("div");
            title.setAttribute("style","text-align:center;font-size:13px;background:#eee;color:#666;padding:2px 4px")
            title.appendChild(document.createTextNode(dayText.toUpperCase()));
            block.appendChild(title);

            var times = document.createElement("div");
            times.setAttribute("style","padding:5px");
            block.appendChild(times);

            dayTimes.forEach(function(t){
                var time = document.createElement("div");
                time.setAttribute("style","padding:2px 0");
                if(t.serverKey === "{{ selected_key }}")
                    time.setAttribute("class","selected")
                times.appendChild(time);

                var link = document.createElement("a");
                link.setAttribute("style","text-decoration:none");
                link.setAttribute("href","/event/"+ t.serverKey);
                link.appendChild(document.createTextNode(t.time));
                time.appendChild(link);
            });
        }
    </script>
</body>
</html>