{% import "macro.html" as macro %}

{% macro render_docx_color(blog, color, show_delete) %}
    {# 使用到moment, 不能放进macro #}
    {% if show_delete %}
        <div id="DeleteModal{{blog.id}}" class="modal fade" role="dialog" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content text-start">
                    <div class="modal-header">
                        <h4 class="modal-title"> 确认删除博文？ </h4>
                    </div>
                    <div class="modal-body">
                        <p> 是否确认删除博文 {{ blog.title }}？ </p>
                    </div>
                    <div class="modal-footer">
                        <a class="btn btn-danger"
                           href="{{ url_for("docx.delete_blog_page", blog=blog.id) }}"> 删除 </a>
                        <button type="button" class="btn btn-outline-dark" data-bs-dismiss="modal"> 取消 </button>
                    </div>
                </div>
            </div>
        </div>
    {% endif %}

    <div class="card mb-3">
        <div class="card-header {{ color }} text-white">
            {{ blog.title }}
            {% if blog.subtitle %}
                <br>
                {{ blog.subtitle }}
            {% endif %}
        </div>
        <div class="card-body">
            Update Date: {{ moment(blog.update_time).format('YYYY-MM-DD HH:mm:ss') }}
            <br>
            Create Date: {{ moment(blog.create_time).format('YYYY-MM-DD HH:mm:ss') }}

            <div class="text-end">
                {% if show_delete %}
                    <a type="button" class="card-link ms-2"
                        data-bs-toggle="modal" data-bs-target="#DeleteModal{{blog.id}}"> 删除 </a>
                {% endif %}

                <a class="card-link ms-2" href="{{ url_for("docx.article_page", blog=blog.id) }}"> 前往 </a>
            </div>
        </div>
    </div>
{% endmacro %}

{% macro render_docx(blog, show_delete) %}
    {# 使用到moment, 不能放进macro #}
    {{ render_docx_color(blog, "bg-primary", show_delete) }}
{% endmacro %}

{% macro render_docx_top(blog, show_delete) %}
    {# 使用到moment, 不能放进macro #}
    {{ render_docx_color(blog, "bg-dark", show_delete) }}
{% endmacro %}

{% macro render_msg(msg, shod_delete)%}
    {# 使用到moment, 不能放进macro #}
    {% if show_delete %}
        <div id="DeleteModal{{msg.id }}" class="modal fade" role="dialog" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content text-start">
                    <div class="modal-header">
                        <h4 class="modal-title"> 确认删除留言？ </h4>
                    </div>
                    <div class="modal-body">
                        <p> 是否确认删除留言？ </p>
                    </div>
                    <div class="modal-footer">
                        <a class="btn btn-danger"
                           href="{{ url_for("msg.delete_msg_page", msg=msg.id) }}"> 删除 </a>
                        <button type="button" class="btn btn-outline-dark" data-bs-dismiss="modal"> 取消 </button>
                    </div>
                </div>
            </div>
        </div>
    {% endif %}

    <div class="card mb-3">
        <div class="card-header bg-success text-white">
            {% if show_email %}  {# 判断是否可读取用户信息 #}
                {{ msg.auth.email }}
            {% else %}
                {{ msg.auth.star_email }}
            {% endif %}
        </div>
        <div class="card-body">
            <p> {{ msg.content.replace('\n', '<br>') | safe }} </p>
            <div class="text-end">
                {% if show_delete %}
                    <a class="card-link mb-2 ms-2"
                        data-bs-toggle="modal" data-bs-target="#DeleteModal{{msg.id }}"> 删除 </a>
                {% endif %}

                {% if msg.secret %}
                    <span class="ms-2"> [私] </span>
                {% endif %}

                <span class="ms-2"> {{ moment(msg.update_time).fromNow(refresh=True) }} </span>
            </div>
        </div>
    </div>
{% endmacro %}

{% macro render_comment(comment, shod_delete)%}
    {# 使用到moment, 不能放进macro #}
    {% if show_delete %}
        <div id="DeleteModal{{comment.id }}" class="modal fade" role="dialog" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content text-start">
                    <div class="modal-header">
                        <h4 class="modal-title"> 确认删除评论？ </h4>
                    </div>
                    <div class="modal-body">
                        <p> 是否确认删除评论？ </p>
                    </div>
                    <div class="modal-footer">
                        <a class="btn btn-danger"
                           href="{{ url_for("docx.delete_comment_page", comment=comment.id) }}"> 删除 </a>
                        <button type="button" class="btn btn-outline-dark" data-bs-dismiss="modal"> 取消 </button>
                    </div>
                </div>
            </div>
        </div>
    {% endif %}

    <div class="card my-3">  {# 此处使用上下间距 #}
        <div class="card-header bg-secondary text-white">
            {% if show_email %}  {# 判断是否可读取用户信息 #}
                {{ comment.auth.email }}
            {% else %}
                {{ comment.auth.star_email }}
            {% endif %}
        </div>
        <div class="card-body">
            <p> {{ comment.content.replace('\n', '<br>') | safe }} </p>
            <div class="text-end">
                {% if show_delete %}
                    <a class="card-link mb-2 ms-2"
                        data-bs-toggle="modal" data-bs-target="#DeleteModal{{comment.id }}"> 删除 </a>
                {% endif %}
                <span class="ms-2"> {{ moment(comment.update_time).fromNow(refresh=True) }} </span>
            </div>
        </div>
    </div>
{% endmacro %}

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    {% block icon %}
        <link rel="icon" href="{{ url_for('static', filename=conf["LOGO"]) }}" type="image/x-icon"/>
    {% endblock %}

    {% block font %}
        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@100;400&display=swap" rel="stylesheet">
    {% endblock %}

    {% block style %}
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
        <link href="{{ url_for('static', filename='styles/base.css') }}" rel="stylesheet">
        <style>
            html {
                font-family: 'Noto Sans SC', sans-serif;
            }
            body{
                background-color: #f0fcff;
            }
        </style>
    {% endblock %}

    {% block javascript %}
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
        {{ moment.include_moment() }}
        {{ moment.lang("zh-CN") }}
    {% endblock %}

    <title>{% block title %} {% endblock %} - {{ blog_name }} </title>
</head>
<body>
{% block nav %}
    <h1 class="text-center mt-2"> 《{{ blog_name }}》—— <small>{{ blog_describe }}</small> </h1>

    <header>
        <nav>
            <ul class="nav nav-tabs justify-content-center mt-3" id="top-nav">
                <li class="nav-item">
                    <a href="{{ url_for('base.index_page') }}" class="nav-link {{ top_nav[0] }}">
                        首页
                    </a>
                </li>

                {% if current_user.check_role("ReadBlog") %}
                <li class="nav-item">
                    <a href="{{ url_for('archive.archive_page') }}" class="nav-link {{ top_nav[1] }}">
                        归档
                    </a>
                </li>

                <li class="nav-item">
                    <a href="{{ url_for('docx.docx_page', page=1) }}" class="nav-link {{ top_nav[2] }}">
                        文章
                    </a>
                </li>
                {% endif %}

                <li class="nav-item">
                    <a href="{{ url_for('msg.msg_page', page=1) }}" class="nav-link {{ top_nav[3] }}">
                        留言
                    </a>
                </li>

                <li class="nav-item">
                    <a href="{{ url_for('about_me.about_me_page') }}" class="nav-link {{ top_nav[4] }}">
                        关于我
                    </a>
                </li>

                <li class="nav-item">
                    {% if current_user.is_authenticated %}
                        <a href="{{ url_for('auth.yours_page') }}" class="nav-link {{ top_nav[5] }}">
                            你的
                        </a>
                    {% else %}
                        <a href="{{ url_for('auth.login_page') }}" class="nav-link {{ top_nav[5] }}">
                            登录
                        </a>
                    {% endif %}
                </li>
            </ul>
        </nav>

        <section class="container mt-2 mb-2">
        {% for message in get_flashed_messages() %}
            <div class="alert alert-info fade show">
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                {{ message }}
            </div>
        {% endfor %}
        </section>
    </header>
{% endblock %}

<div id="content" class="mb-2">
    {% block content %} {% endblock %}
</div>

{% block footer %}
    {# footer 最后加载 #}
    <footer id="foot">
        <hr>
        {{ conf['FOOT'] }}
        {% if get_icp() %}
            <br> <a id="ICP2" href="https://beian.miit.gov.cn" target="_blank"
                style="display:inline-block;text-decoration:none;height:20px;line-height:20px;" >
                {{ get_icp() }} </a>
            {% if get_gongan() %}
                <br> <a id="GONG_AN2" target="_blank"
                   href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=44011402000783"
                   style="display:inline-block;text-decoration:none;height:20px;line-height:20px;">
                    <img src="{{ url_for('static', filename='wangan.png') }}" style="float:left;" alt="wangan"/>
                    {{ get_gongan() }}
                </a>
            {% endif %}
        {% endif %}
    </footer>
    <script>
        function SetFooter (mutationsList, observer) {
            let foot = document.getElementById('foot')
            let content_height = content.getBoundingClientRect().bottom
            let win_height = 0
            if (window.innerHeight)
                win_height = window.innerHeight;
            else if ((document.body) && (document.body.clientHeight))
                win_height = document.body.clientHeight;

            if (win_height - content_height - foot.clientHeight <= 0)
                foot.style.marginTop = "0"
            else
                foot.style.marginTop = (win_height - content_height - foot.clientHeight).toString() + "px"
        }
        let MutationObserver = window.MutationObserver;
        let observer = new MutationObserver(SetFooter);
        let content = document.getElementById('content')
        observer.observe(content, {
            attributes: true, // 属性的变动
            subtree: true, // 是否将观察器应用于该节点的所有后代节点
        });
        SetFooter()
    </script>
{% endblock %}

{% block javascript_foot %} {% endblock %}

</body>
</html>