<?xml version="1.0" encoding="UTF-8"?>

<ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://xmlns.jcp.org/jsf/html" xmlns:ui="http://xmlns.jcp.org/jsf/facelets" xmlns:p="http://primefaces.org/ui" xmlns:f="http://xmlns.jcp.org/jsf/core">
    <ui:param name="isKurz" value="#{isKurz eq true}" />

    <p:outputPanel deferred="false" layout="block">
        <p:outputPanel>
            <h3 class="calendar-timeframe__header">Heute</h3>
            <div class="calendar-item">
                <div class="calendar-item__id" title="Bundestagswahl" style="background-color:skyblue;">BTW</div>
                <div class="calendar-item__body">
                    <div class="calendar-item__date">Mo, 07.08.2017</div>
                    <h3 class="calendar-item__title">Bekanntgabe der Wahlvorschläge</h3>
                    <ul class="calendar-item__tags">
                        <li class="calendar-item__tag">Kreiswahlleiter</li>
                        <li class="calendar-item__tag">Landeswahlleiterin</li>
                    </ul>

                </div>
            </div>
        </p:outputPanel>

        <p:outputPanel>
            <h3 class="calendar-timeframe__header">Morgen</h3>
            <div class="calendar-item">
                <p>Keine Ereignisse</p>
            </div>
        </p:outputPanel>

        <p:outputPanel>
            <h3 class="calendar-timeframe__header">Nächste 7 Tage</h3>
            <div class="calendar-item">
                <div class="calendar-item__id" title="Volksentscheid" style="background-color:lightgreen;">VE</div>
                <div class="calendar-item__body">
                    <div class="calendar-item__date">Fr, 11.08.2017</div>
                    <h3 class="calendar-item__title">Veröffentlichung des Wortlauts</h3>
                    <ul class="calendar-item__tags">
                        <li class="calendar-item__tag">Landesabstimmungsleiterin</li>
                    </ul>
                </div>
            </div>
            <div class="calendar-item">
                <div class="calendar-item__id" title="Volksentscheid" style="background-color:lightgreen;">VE</div>
                <div class="calendar-item__body">
                    <div class="calendar-item__date">So, 13.08.2017</div>
                    <h3 class="calendar-item__title">Stichtag für die Eintragung ins Abstimmungsverzeichnis</h3>
                    <ul class="calendar-item__tags">
                        <li class="calendar-item__tag">Bezirkswahlamt</li>
                    </ul>
                </div>
            </div>
        </p:outputPanel>

        <p:outputPanel rendered="#{not isKurz}">
            <h3 class="calendar-timeframe__header">Nächste 30 Tage</h3>
            <div class="calendar-item">
                <div class="calendar-item__id" title="Volksentscheid" style="background-color:lightgreen;">VE</div>
                <div class="calendar-item__body">
                    <div class="calendar-item__date">Mo, 14.08.2017</div>
                    <h3 class="calendar-item__title">Beginn der Ausgabe von Briefabstimmungsunterlagen</h3>
                    <ul class="calendar-item__tags">
                        <li class="calendar-item__tag">Bezirkswahlamt</li>
                    </ul>
                </div>
            </div>
            <div class="calendar-item">
                <div class="calendar-item__id" title="Volksentscheid" style="background-color:lightgreen;">VE</div>
                <div class="calendar-item__body">
                    <div class="calendar-item__date">Mo, 14.08.2017</div>
                    <h3 class="calendar-item__title">Beginn des Versandes der Abstimmungsbenachrichtigung und deramtlichen Information</h3>
                    <ul class="calendar-item__tags">
                        <li class="calendar-item__tag">Landesabstimmungsleiterin</li>
                    </ul>
                </div>
            </div>
            <div class="calendar-item">
                <div class="calendar-item__id" title="Volksentscheid" style="background-color:lightgreen;">VE</div>
                <div class="calendar-item__body">
                    <div class="calendar-item__date">Do, 31.08.2017</div>
                    <h3 class="calendar-item__title">Bekanntmachung über Einsicht des Abstimmungsverzeichnisses</h3>
                    <ul class="calendar-item__tags">
                        <li class="calendar-item__tag">Landesabstimmungsleiterin</li>
                    </ul>
                </div>
            </div>
            <div class="calendar-item">
                <div class="calendar-item__id" title="Volksentscheid" style="background-color:lightgreen;">VE</div>
                <div class="calendar-item__body">
                    <div class="calendar-item__date">So, 03.09.2017</div>
                    <h3 class="calendar-item__title">Spätester Zugang der Abstimmungsbenachrichtigung bei den Abstimmungsberechtigten</h3>
                    <ul class="calendar-item__tags">
                        <li class="calendar-item__tag">Bezirkswahlamt</li>
                    </ul>
                </div>
            </div>
            <div class="calendar-item">
                <div class="calendar-item__id" title="Volksentscheid" style="background-color:lightgreen;">VE</div>
                <div class="calendar-item__body">
                    <div class="calendar-item__date">Mo, 04.09.2017 &#8211; Fr, 08.09.2017</div>
                    <h3 class="calendar-item__title">Einsicht in die Abstimmungsverzeichnisse</h3>
                    <ul class="calendar-item__tags">
                        <li class="calendar-item__tag">Bezirkswahlamt</li>
                    </ul>
                </div>
            </div>
        </p:outputPanel>
    </p:outputPanel>
    <style>
        .ui-dialog {
            border: none;
        }
        .ui-sidebar .ui-panel-titlebar,
        .ui-dialog .ui-dialog-title {
            font-size: 1rem;
            margin: 0.5rem 0;
            text-transform: uppercase;
        }
        .ui-sidebar .ui-panel-titlebar .ui-outputicon,
        .ui-dialog-title .ui-outputicon {
            width: auto;
            height: auto;
            overflow: initial;
            margin-right: 0.5rem;
            vertical-align: baseline;
        }
        .calendar-dialog .ui-dialog-titlebar {
            background: transparent;
            /* border-bottom: 1px solid #039ee6; */
            color: #039ee6;
        }
        .calendar-dialog .ui-dialog-title {
            margin: 0.75rem 0 0.5rem;
        }

        .ui-sidebar {
            background: rgba(255, 255, 255, 0.98);
            border: none;
        }
        .ui-sidebar .ui-panel-titlebar {
            /* color: #333; */
            /* background-color: transparent !important; */
            font-size: 0.75rem;
            margin: 0;
        }

        .calendar-timeframe__header {
            color: gray;
            font-weight: normal;
            font-size: 1rem;
        }

        .calendar-item {
            display: flex;
            margin-bottom: 3rem;
        }

        .calendar-item p {
            margin: 0;
        }

        .calendar-item__id {
            flex: 1 1 auto;
            width: 2rem;
            height: 2rem;
            margin-right: 0.5rem;
            padding: 0.45rem 0.3rem;
            border-radius: 1rem;
            vertical-align: top;
            font-size: 0.65rem;
            text-align: center;
            /* Styles für größeren Kreis: */
            min-width: 3.5rem;
            min-height: 3.5rem;
            margin-right: 1rem;
            margin-top: -0.1rem;
            border-radius: 4rem;
            padding: 1.2rem 0.5rem;
            font-size: 1rem;
            color: rgba(255, 255, 255, 0.8);
            font-weight: 600;
        }

        .calendar-item__body {
            flex: 1 1 100%;
            vertical-align: top;
        }

        .calendar-item__date {
            color: gray;
            font-size: 0.75rem;
        }

        .calendar-item__title {
            margin: 0.25rem 0 0.5rem;
            font-size: 1rem;
        }

        .calendar-item__tags {
            list-style-type: none;
            margin: 0;
            padding: 0;
        }

        .calendar-item__tag {
            display: inline-block;
            padding: 0.25rem 0.5rem;
            background-color: lightgray;
            border-radius: 2px;
        }

        .calendar-item__tag + .calendar-item__tag {
            margin-left: 0.5rem;
        }
    </style>

</ui:composition>
