{% block doc -%}
    <!DOCTYPE html>
    <html{% block html_attribs %}{% endblock html_attribs %} lang="en">
    {%- block html %}

        <head>
            {%- block head %}
                <title>{% block title %}OurTieba{% endblock title %}</title>

                {%- block metas %}
                    <meta charset="utf-8">
                    <meta name="viewport" content="width=device-width, initial-scale=1">
                {%- endblock metas %}

                <link rel="shortcut icon" href="{{ url_for('static', filename='ico/favicon.ico') }}"
                      type="image/x-icon">
                <link rel="icon" href="{{ url_for('static', filename='ico/favicon.ico') }}" type="image/x-icon">
                <link rel="stylesheet"
                      href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.1/font/bootstrap-icons.css">
                <script src="{{ url_for('static', filename='js/jquery-3.6.0.min.js') }}"></script>
                <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css"
                      rel="stylesheet"
                      integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6"
                      crossorigin="anonymous">
                <style>
                    body {
                        background-color: #fbfbfd;
                    }
                </style>
            {%- endblock head %}
        </head>

        <body{% block body_attribs %}{% endblock body_attribs %}>
        {% block body -%}
            {% block header -%}
                <header class="fixed-top p-3 bg-dark text-white">
                    <div class="container">
                        <div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start">
                            {#                        TODO: Add SVG file here#}
                            {#                <a href="/" class="d-flex align-items-center mb-2 mb-lg-0 text-white text-decoration-none">#}
                            {#                    <svg class="bi me-2" width="40" height="32">#}
                            {#                        <use xlink:href="#bootstrap"></use>#}
                            {#                    </svg>#}
                            {#                </a>#}

                            <ul class="nav col-12 col-lg-auto me-lg-auto mb-2 justify-content-center mb-md-0">
                                <li><a href="/" class="nav-link px-2 text-secondary">Home</a></li>
                            </ul>
                            {% if session.Uid %}
                                <button class="new_message btn btn-outline-light" onclick="window.open('/notifications');"></button>&nbsp;
                            {% endif %}
                            <form class="col-12 col-lg-auto mb-3 mb-lg-0 me-lg-3"
                                  action="{{ url_for('abstract_user.search_board') }}" method="get">
                                <input type="search" name='kw' class="form-control form-control-dark"
                                       placeholder="Search...">
                            </form>

                            <div class="text-end">
                                {% if not session.Uid %}
                                    <a type="button" class="btn btn-outline-light me-2"
                                       href="{{ url_for('guest.login_interface') }}">Login</a>
                                    <a type="button" class="btn btn-warning"
                                       href="{{ url_for('guest.register_interface') }}">Register</a>
                                {% else %}
                                    <div class="dropdown text-end">
                                        <a href="#" class="d-block link-dark text-decoration-none dropdown-toggle"
                                           id="{{ session.user_info["nickname"] }}" data-bs-toggle="dropdown"
                                           aria-expanded="false">
                                            <img src="{{ '/cdn/'+ session.user_info["avatar"] }}" width="32" height="32"
                                                 class="rounded-circle">
                                        </a>
                                        <ul class="dropdown-menu text-small"
                                            aria-labelledby="{{ session.user_info["nickname"] }}" style="">
                                            <li><a class="dropdown-item" target="_blank"
                                                   href="{{ url_for('abstract_user.get_personal_profile', Uid=session.Uid) }}">Profile</a>
                                            </li>
                                            <li>
                                                <hr class="dropdown-divider">
                                            </li>
                                            <li><a class="dropdown-item" href="{{ url_for('api.logout_auth') }}">Sign
                                                out</a></li>
                                        </ul>
                                    </div>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                </header>
            {%- endblock header %}
            {% block content -%}
                <div class="container">
                    {% for message in get_flashed_messages() %}
                        <div class="alert alert-warning">
                            <button type="button" class="close" data-dismiss="alert">&times;</button>
                            {{ message }}
                        </div>
                    {% endfor %}
                    <div style="margin-top: 80px">
                        {% block page_content %}{% endblock %}
                    </div>
                </div>
            {%- endblock content %}

            {% block scripts %}
                {{ moment.include_moment() }}
                <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.1/dist/umd/popper.min.js"
                        integrity="sha384-SR1sx49pcuLnqZUnnPwx6FCym0wLsk5JZuNx2bPPENzswTNFaQU1RDvt3wT4gWFG"
                        crossorigin="anonymous"></script>
                <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.min.js"
                        integrity="sha384-j0CNLUeiqtyaRmlzUHCPZ+Gy5fQu0dQ6eZ/xAww941Ai1SxSY+0EQqNXNE6DZiVc"
                        crossorigin="anonymous"></script>
                <script src="{{ url_for('static', filename='js/main.js') }}"></script>
                <script src="{{ url_for('static', filename='js/get_log.js') }}"></script>
                <script>
                    $(function () {
                        $('[data-toggle="tooltip"]').tooltip()
                    })
                </script>
            {%- endblock scripts %}
        {%- endblock body %}
        </body>
    {%- endblock html %}
    </html>
{% endblock doc -%}
