{% extends base %}

{% block head %}

<style type="text/css">
    .option-td {
        width: 25%;
        text-align: left;
    }

    .date-td {
        width: 25%;
        text-align: right;
    }
</style>

{% end %}

{% block body %}
    {% from xutils import dateutil %}

    <div class="card">
        日期
        <select name="year" value="{{year}}">
            {% for j in range(year-5,year+6) %}
                <option value="{{j}}">{{j}}</option>
            {% end %}
        </select>
        <select name="month" value="{{month}}">
            {% for i in range(1,13) %}
                <option value="{{i}}">{{i}}</option>
            {% end %}
        </select>

        <div class="float-right">
            <a class="default-path-link" href="{{link_by_month(year, month, -1)}}">上个月</a>
            <a class="default-path-link" href="{{link_by_month(year, month, 1)}}">下个月</a>
            <a class="default-path-link" href="{{_server_home}}/note/index">索引</a>
        </div>
    </div>

    {% if len(notes) > 0 %}
    <div class="card row">
        <table class="table row">
            <tr>
                <th>标题</th>
                <th class="hide">项目</th>
                <th style="text-align: right;">时间</th>
            </tr>
        {% for note in notes %}
            <tr>
                <td>
                    <i class="fa {{note.icon}}"></i>
                    <a href="{{_server_home}}/note/{{note.id}}">{{note.name}}</a>
                </td>
                <td class="option-td hide">
                    {% if str(note.parent_id) != "0" %}
                        <a href="{{_server_home}}/note/view?id={{note.parent_id}}">{{note.parent_name}}</a>
                    {% end %}
                </td>
                <td class="date-td">
                    {{dateutil.format_mmdd(note.ctime)}}
                </td>
            </tr>
        {% end %}
        </table>
    </div>
    {% end %}

    <script>
    $(function () {
        $("select").change(function (e) {
            var year = $("[name=year]").val();
            var month = $("[name=month]").val();
            location.href = "?year=" + year + "&month=" + month;
        });

    })
    </script>

{% end %}

{% block aside %}
    {% include note/component/mod_aside.html %}
{% end %}
