<div class="container">
    <h1>Ranking calendar ({{ ThisMonth.MonthLiteral }} {{ Year }})</h1>
    <div class="switcher">
        {{ url := "/rankingCalendar?date=" + ThisMonth.Link + "&mode=" }}
        <span class="switch-title">Modes</span>
        <a href="{{ url }}daily" class="switch-button">Daily</a>
        <a href="{{ url }}weekly" class="switch-button">Weekly</a>
        <a href="{{ url }}monthly" class="switch-button">Monthly</a>
        <a href="{{ url }}rookie" class="switch-button">Rookie</a>
        <span class="switch-seperator"></span>
        <a href="{{ url }}daily_r18" class="switch-button">Daily (R-18)</a>
        <a href="{{ url }}weekly_r18" class="switch-button">Weekly (R-18)</a>
        <a href="{{ url }}r18g" class="switch-button">R-18G</a>
        <br />
        <a href="{{ url }}original" class="switch-button">Original</a>
        <a href="{{ url }}male" class="switch-button">Popular along males</a>
        <a href="{{ url }}female" class="switch-button">Popular along females</a>
        <br />
        <a href="{{ url }}male_r18" class="switch-button">Popular along males (R-18)</a>
        <a href="{{ url }}female_r18" class="switch-button">Popular along females (R-18)</a>
    </div>

    <div>
        <form action="/rankingCalendar" method="post">
            <input type="hidden" name="mode" value="{{ Mode }}" />
            <label for="date">
                Date picker (mm/dd/yyyy):
            </label>
            <span>
                <input type="date" name="date" min="2007-09-01" max="{{Year}}-{{ ThisMonth.MonthPadded }}-01" value="{{Year}}-{{ ThisMonth.MonthPadded }}-01"/>
            </span>
            <span>
                <input type="submit" value="Go" />
            </span>
        </form>
    </div>

    <br>
    <div id="calendar">
        <div class="calendar-weeks">
            <div>Sun</div>
            <div>Mon</div>
            <div>Tue</div>
            <div>Wed</div>
            <div>Thu</div>
            <div>Fri</div>
            <div>Sat</div>
        </div>
        <div class="calendar-board">
            {{ raw: Render }}
        </div>
    </div>
    <div class="pagination">
        {{ url := "/rankingCalendar?mode=" + Mode + "&date=" }}
        <a href="{{ url }}{{ MonthBefore.Link }}" class="pagination-button ">Last month</a>
        <a href="{{ url }}{{ MonthAfter.Link }}" class="pagination-button ">Next month</a>
    </div>
</div>
