<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>BGmi HTTP Service</title>
    <link rel="stylesheet" href="/css/image.css">
    <link rel="stylesheet" href="/static/css/material.indigo-pink.min.css">
    <link rel="stylesheet" href="/static/css/dialog-polyfill.css">
    <link rel="stylesheet" href="/static/css/style.css">
    <script src="/static/js/material.min.js"></script>
    <script src="/static/js/dialog-polyfill.js"></script>
    <style>
        .followed {
            color: #000;
        }

        .strong {
            font-weight: 900;
        }
        .strong::after {
            content: "Today";
            font-size: 12px;
            font-weight: 200;
            position: absolute;
        }
        .title {
            text-align: center;
        }
        .logo {
            overflow: hidden;
            text-align: center;
            border-radius: 100%;
        }

        .logo img {
            width: 130px;
            height: 130px;
            padding: 10px 10px;
            border-radius: 100%;
            -webkit-transition: -webkit-transform 1s ease-out;
            transition: -webkit-transform 1s ease-out;
        }

        .logo:hover img{
            -webkit-transform:rotateY(2turn);
            transform:rotateY(2turn)
        }

        .Y {
            border-bottom: 1px solid #ddd;
            box-sizing: border-box;
            list-style: none;
            padding: 0 0 8px 0;
            position: relative;
        }

        .mdl-card {
            max-width: 600px;
        }

        .mdl-card__title {
            min-height: 250px;
        }

        .mdl-layout__content > .mdl-card {
            margin: 30px 15px 30px 30px;
            display: inline-block;
            width: 30%;
            min-width: 430px;
            min-height: 150px;
        }

        @media screen and (min-device-width : 320px) and (max-device-width: 568px) {
            .mdl-layout__content > .mdl-card {
                margin: 30px auto;
                display: block;
                width: 90%;
                min-width: 300px;
                min-height: 150px;
            }

        }

        @media screen and (min-device-width : 768px) and (max-device-width: 1024px) and (orientation : portrait) {
            .mdl-layout__content > .mdl-card {
                margin: 30px auto;
                display: block;
                width: 90%;
                min-width: 300px;
                min-height: 150px;
            }

        }

        .dialog-about, .dialog-calendar {
            width: 743px;
        }

        .dialog-about > a, .dialog-calendar > a {
            outline: none;
        }

        .bangumi-title {
            padding: 12px 0;
            display: inline-block;
            white-space: nowrap;
        }

        .bangumi-title-container {
            text-overflow: ellipsis;
            overflow: hidden;
        }

        .mdl-badge[data-badge] {
            position: absolute;
            right: 10px;
        }

        .mdl-badge[data-badge]:after {
            top: 15px;
            position: absolute;
        }
    </style>
</head>

<body>
<div class="demo-layout mdl-layout mdl-js-layout mdl-layout--fixed-drawer mdl-layout--fixed-header">
    <header class="demo-header mdl-layout__header mdl-color--blue-grey-400 mdl-color-text--grey-100">
        <div class="mdl-layout__header-row">
            <span class="mdl-layout-title">BGmi HTTP Service</span>
            <div class="mdl-layout-spacer"></div>
        </div>
    </header>
    <div class="demo-drawer mdl-layout__drawer mdl-color--white-100 mdl-color-text--blue-grey-400">
        <header class="logo">
            <img src="/static/images/logo.jpg" class="mdl-card--border">
        </header>
        <nav class="mdl-navigation mdl-color--white-100 Y">
            <a class="mdl-navigation__link" href="/"><i class="mdl-color-text--blue-400 material-icons" role="presentation">home</i>  Home</a>
            <a class="mdl-navigation__link" href="/bangumi/"><i class="mdl-color-text--cyan-400 material-icons" role="presentation">inbox</i>  Bangumi</a>
            <a class="mdl-navigation__link" href="/?old=1"><i class="mdl-color-text--green-400 material-icons" role="presentation">inbox</i> Finished</a>
            <a class="mdl-navigation__link calendar" href="##"><i class="mdl-color-text--orange-400 material-icons" role="presentation">event</i>  Calendar</a>
            <a class="mdl-navigation__link" href="/rss"><i class="mdl-color-text--red-400 material-icons" role="presentation">rss_feed</i>  Feed</a>
            <!--<a class="mdl-navigation__link" href="javascript:alert('qwq')"><i class="mdl-color-text--red-400 material-icons" role="presentation">people</i>  Admin</a>-->
        </nav>
        <nav class="mdl-navigation mdl-color--white-100">
            <a class="mdl-navigation__link about" href="##"><i class="mdl-color-text--black-400 material-icons" role="presentation">help_outline</i>  About</a>
            <a class="mdl-navigation__link" href="mailto:ricterzheng@gmail.com"><i class="mdl-color-text--black-400 material-icons" role="presentation">report</i>  Bug Report</a>
            <a class="mdl-navigation__link" href="https://github.com/RicterZ/BGmi">Based on BGmi(v{{ version }})</a>

        </nav>
    </div>
    <main class="mdl-layout__content mdl-color--grey-100">
        {% for bangumi in data %}
        <div class="mdl-card mdl-shadow--2dp">
            <div class="mdl-card__title" id="img_{{ md5(bangumi['bangumi_name']) }}">
            </div>
            <div class="mdl-card__supporting-text">
                <div class="bangumi-title-container">
                    {% if bangumi['status'] == 2 %}
                    <span class="mdl-badge mdl-badge--no-background- mdl-badge--overlap" data-badge="♥"></span>
                    {% end %}
                    <h2 class="mdl-card__title-text bangumi-title">{{ bangumi['bangumi_name'] }}</h2>
                </div>
                更新到第 {{ bangumi['episode'] }} 集
            </div>
            <div class="mdl-card__actions mdl-card--border">
                <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect" href="/player/{{ bangumi['bangumi_name'] }}/#episode_{{ bangumi['episode'] }}">
                    Play
                </a>
                <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect" href="/bangumi/{{ bangumi['bangumi_name'] }}/{{ bangumi['episode'] }}/">
                    Download
                </a>
            </div>
        </div>
        {% end %}
    </main>
</div>
<dialog class="mdl-dialog dialog-calendar">
    <h4 class="mdl-dialog__title">Bangumi Calendar</h4>
    <div class="mdl-dialog__content">
        <a class="mdl-color-text--blue-grey-400" target="_blank" href="/calendar.ics">ICS Calendar for iOS / Android</a>
        <p>
            {% for i, v in enumerate(cal.items()) %}
        <h5 class="{% if i == 0 %}strong{% end %}">{{ v[0] }}.</h5>
        {% for row in v[1] %}
        {% if row['name'] in followed %}<b class="followed">{{ row['name'] }}</b>{% else %}{{ row['name'] }}{% end %} /
        {% end %}
        {% end %}
        </p>
    </div>
    <div class="mdl-dialog__actions">
        <button type="button" autofocus class="mdl-button close-calendar">关闭</button>
    </div>
</dialog>
<dialog class="mdl-dialog dialog-about">
    <h4 class="mdl-dialog__title">BGmi HTTP Service</h4>
    <div class="mdl-dialog__content">
        <p>
        <h5>关于</h5>
        BGmi HTTP Service 基于 <a class="mdl-color-text--blue-grey-400" href="https://github.com/RicterZ/BGmi" target="_blank">BGmi</a> 构建。<br>
        其中，BGmi 的所有数据来源于<a class="mdl-color-text--blue-grey-400" href="https://bangumi.moe" target="_blank">萌番组<sup>大好きだよ</sup></a>。
        <br>
        <h5>致谢</h5>
        <a class="mdl-color-text--blue-grey-400" href="https://bangumi.moe" target="_blank">萌番组</a><br>
        <a class="mdl-color-text--blue-grey-400" href="https://aria2.github.io" target="_blank">aria2</a><br>
        <a class="mdl-color-text--blue-grey-400" href="https://github.com/DIYgod/DPlayer" target="_blank">DPlayer</a><br>
        </p>
    </div>
    <div class="mdl-dialog__actions">
        <button type="button" autofocus class="mdl-button close-about">关闭</button>
    </div>
</dialog>
<script type="text/javascript">
    function model_register(button, dialog, close) {
        if (!dialog.showModal) {
            dialogPolyfill.registerDialog(dialog);
        }
        button.addEventListener('click', function() {
            dialog.showModal();
        });

        close.addEventListener('click', function() {
            dialog.close();
        })
    }
    var button = document.querySelector('.about');
    var dialog = document.querySelector('.dialog-about');
    var close = document.querySelector('.close-about');
    model_register(button, dialog, close);

    var button = document.querySelector('.calendar');
    var dialog = document.querySelector('.dialog-calendar');
    var close = document.querySelector('.close-calendar');
    model_register(button, dialog, close);

</script>
</body>
</html>
