<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, shrink-to-fit=no">

<title>Stashr - {{ title }}</title>

<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/bootstrap.css') }}">
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/stashr.css') }}">

<link href="https://cdn.jsdelivr.net/npm/vue-toast-notification/dist/theme-sugar.css" rel="stylesheet">

<link rel="stylesheet" href="{{ url_for('static', filename='css/all.css') }}">

<link href="https://fonts.googleapis.com/css?family=Grand+Hotel" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">

<link rel="manifest" href="{{ url_for('static', filename='manifest/manifest.json') }}">

<link rel="apple-touch-icon" href="touch-icon-iphone.png">
<link rel="apple-touch-icon" sizes="152x152" href="{{ url_for('static', filename='assets/stashr-152.png') }}">
<link rel="apple-touch-icon" sizes="180x180" href="{{ url_for('static', filename='assets/stashr-180.png') }}">
<link rel="apple-touch-icon" sizes="167x167" href="{{ url_for('static', filename='assets/stashr-167.png') }}">
<meta name="apple-mobile-web-app-title" content="Stashr">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="default">

<script src="{{ url_for('static', filename='js/stashr.js') }}"></script>

<!-- VueJS -->
<script src="{{ url_for('static', filename='js/vue.dev.js') }}"></script>
<!-- VueJS Toasts -->
<script src="https://cdn.jsdelivr.net/npm/vue-toast-notification"></script>

<!-- START HEADER SCRIPT INCLUDES -->
{% block header_script_files %}{% endblock %}
{{ emit_tep('base_page_header_script_files') }}
<!-- END HEADER SCRIPT INCLUDES -->

</head>
<body>

<!-- START NAVBAR -->

<nav class="navbar navbar-expand-lg navbar-dark bg-primary sticky-top">
    <div class="container-fluid">
        <a class="navbar-brand" href="{{ url_for('index_page') }}">
            <img class="border rounded-circle" src="{{ url_for('static', filename='assets/stashr.svg') }}" width="40" height="40" />
            <span class="stashr-project_title">Stashr</span>
        </a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarStashr" aria-cointrols="navbarStashr" aria-expanded="false" aria-label="Toggle Navigation">
            <span class="navbar-toggler-icon"></span>
        </button>

        {% if not current_user.is_authenticated %}
        {% if not request.endpoint == 'first_run_page' %}
        <div class="collapse navbar-collapse" id="navbarStashr">
            <ul class="navbar-nav ms-auto">
                <li class="nav-item">
                    <a class="nav-link" href="{{ url_for('login_page') }}">
                        LOGIN
                    </a>
                </li>
                {% if open_registration %}
                <li class="nav-item">
                    <a class="nav-link" href="{{ url_for('register_page') }}">
                        REGISTER
                    </a>
                </li>
                {% endif %}
            </ul>
        </div>
        {% endif %}
        {% endif %}

        {% if current_user.is_authenticated %}
        <div class="collapse navbar-collapse" id="navbarStashr">
            <ul class="navbar-nav me-auto">
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="libraryDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                        LIBRARY
                    </a>
                    <ul class="dropdown-menu" aria-labelledby="libraryDropdown">
                        <li><a class="dropdown-item" href="{{ url_for('all_volumes_page') }}">VOLUMES</a></li>
                        <li><a class="dropdown-item" href="{{ url_for('all_publishers_page') }}">PUBLISHERS</a></li>
                        {% if current_user.role == 'admin' %}
                        <li><a class="dropdown-item" href="{{ url_for('scrape_folders_page') }}">SCRAPE</a></li>
                        {% endif %}
                    </ul>
                </li>
                {% if current_user.role == 'admin' or current_user.role == 'librarian' %}
                <li class="nav-item">
                    <a class="nav-link{% if request.path == url_for('new_releases_page') %} active{% endif %}" href="{{ url_for('new_releases_page') }}">
                        NEW RELEASES
                    </a>
                </li>
                {% endif %}
                {% if current_user.role == 'admin' or current_user.role == 'librarian' or current_user.role == 'reader' %}
                <li class="nav-item">
                    <a class="nav-link{% if request.path == url_for('reading_list_page') %} active{% endif %}" href="{{ url_for('reading_list_page') }}">
                        READING LIST
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link{% if request.path == url_for('all_collections_page') %} active{% endif %}" href="{{ url_for('all_collections_page') }}">
                        COLLECTIONS
                    </a>
                </li>
                {% endif %}
                {{ emit_tep("base_page_main_menu") }}
            </ul>
            <ul class="navbar-nav ms-auto">
                {% if current_user.role == 'admin' %}
                <li class="nav-item">
                    <a class="nav-link" href="{{ url_for('settings_page') }}">
                        <i class="fa fa-cogs"></i>
                        Settings
                    </a>
                </li>
                {% endif %}
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="libraryDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                        <i class="fa fa-user"></i>
                        {{ current_user.username }}
                    </a>
                    <ul class="dropdown-menu" aria-labelledby="libraryDropdown">
                        <li><a class="dropdown-item" href="{{ url_for('settings_single_user_page', user_id=current_user.id) }}">
                            <i class="fa fa-user"></i>
                            {{ current_user.username }}
                        </a></li>
                        <li><a class="dropdown-item" href="{{ url_for('logout_page') }}">
                            <i class="fas fa-sign-out-alt"></i>
                            Logout
                        </a></li>
                    </ul>
                </li>
            </ul>
        </div>
        {% endif %}

    </div>
</nav>

<!-- END NAVBAR -->

<!-- START HEADER -->
<div class="py-2" id="stashr_header">
{% block header %}{% endblock %}
</div>
<!-- END HEADER -->

<!-- START CONTENT -->
<div class="py-2" id="stashr_content">
{% block content %}{% endblock %}
</div>
<!-- END CONTENT -->

<!-- START MODALS -->
{% block modals %}{% endblock %}
{{ emit_tep('base_page_modals') }}
<!-- END MODALS -->

<!-- START BUTTON CONTAINER -->
<div class="stashr-button_container p-2">
{% block button_container %}{% endblock %}
</div>
<!-- END BUTTON CONTAINER -->

<!-- START FOOTER SCRIPT INCLUDES -->
<script src="{{ url_for('static', filename='js/bootstrap.bundle.js') }}"></script>
{% block footer_script_files %}{% endblock %}
{{ emit_tep('base_page_footer_script_files') }}
<!-- END FOOTER SCRIPT INCLUDES -->

<!-- START FOOTER SCRIPT -->
<script type="text/javascript">

/* ----- CODE FOR TOOLTIPS WHEN WORKING 
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
    return new bootstrap.Tooltip(tooltipTriggerEl)
})
*/

Vue.use(VueToast);

// Flashes
{% with flashes = get_flashed_messages(with_categories=true) %}
	{% if flashes %}
    	{% for category, message in flashes %}
            stashrToast('{{ message }}', '{{ category }}');
		{% endfor %}
	{% endif %}
{% endwith %}

{% block script %}{% endblock %}
{{ emit_tep('base_page_script') }}

</script>
<!-- END FOOTER SCRIPT -->

</body>
</html>