{# Layout : Admin #}
<!doctype html>
<html lang="en">
<head>
    {% set isDebug = config('app.debug') %}
    {% set env     = config('app.env') %}

    {% include 'admin/meta.twig' %}

    {{ hooks_do_action('admin_header') }}

    {% block head %}

    {% endblock %}
</head>
<body>
    <div id="dialog" class="hidden"></div>
    <div id="wrapper">

        <div id="header">

            <a href="/admin/" title="mtc." class="logo">
                {{ file_get_contents(settings.SITE_PATH ~ '/core/admin/images/logo.svg')|raw }}
            </a> <!-- .logo -->

            <ul class="headerTitleSection">
                <li>
                    <span>{{ config('app.name') }}</span> Admin Dashboard
                </li>
            </ul>


            <ul class="headerMenuSections t">

                {% if admin_id is not empty and admin_user is not empty %}
                    <li>
                        Welcome back, <span>{{ admin_user.user.name }}</span>
                    </li>

                    {% if new_message_count is not empty and new_message_count > 0 %}
                        <li>
                            <a href="/plugins/MembersMessaging/admin/my_messages.php" style="color: red;">
                                <i class="fa fa-exclamation-triangle"></i>
                                <strong>You have {{ new_message_count }} unread messages</strong>
                            </a>
                        </li>
                    {% endif %}

                    <li>
                        <a href="/admin/"
                            title="Go to {{ config('app.name') }} Admin home"
                        >
                            <i class="fa fa-home"></i>
                            Dashboard
                        </a>
                    </li>
                    <li>
                        <a href="/"
                            title="Go to {{ config('app.name') }}"
                            target="_blank"
                        >
                            <i class="fa fa-globe"></i>
                            Homepage
                        </a>
                    </li>
                    <li>
                        <i class="fa fa-sign-out"></i>
                        <a href="/admin/logout.php">Logout</a>
                    </li>
                {% endif %}
            </ul> <!-- .headerMenuSections -->

            <a class="flyoutButton">
                Menu<i class="fa fa-bars" aria-hidden="true"></i>
            </a>

        </div> <!-- #header -->

        <div id="content">

            {% include 'admin/nav.twig' %}

            <div class="rightcol">
                {% block content %}

                    Content Block

                {% endblock %}
            </div><!-- .rightcol -->
        </div><!-- #content -->

    </div><!-- #wrapper -->

    {{ hooks_do_action('admin_footer') }}

    {% block scripts %}{% endblock %}

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            let vueElements = document.querySelectorAll(".js-vue-environment");

            for (let i = 0; i < vueElements.length; i++) {
                new Vue({
                    el: vueElements[i],
                    methods: {
                        emitEvent(name, data) {

                            {% if isDebug and env in ['local', 'staging'] %}
                                console.log(name);
                            {% endif %}
                            this.events.push({
                                name: name,
                                data: data,
                            })
                        }
                    },
                    data: {
                        events: [],
                    }
                });
            }
        });
    </script>

</body>
</html>
