<!doctype html>
<html lang="en">
    <head>
        {% block head %}
            <meta charset="utf-8">
            <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

            {% block styles %}
                {{ bootstrap.load_css() }}
                <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
            {% endblock %}

            <title>ViGi Web Console {% block title %}{% endblock %}</title>

            <link rel="apple-touch-icon" sizes="180x180" href="{{ url_for('static', filename='apple-touch-icon.png') }}">
            <link rel="icon" type="image/png" sizes="32x32" href="{{ url_for('static', filename='favicon-32x32.png') }}">
            <link rel="icon" type="image/png" sizes="16x16" href="{{ url_for('static', filename='favicon-16x16.png') }}">
            <link rel="manifest" href="{{ url_for('static', filename='site.webmanifest') }}">
        {% endblock %}
    </head>
    <body>
        <nav class="navbar navbar-expand bg-body-tertiary">
            <div class="container d-flex flex-row justify-content-start">
                <a class="navbar-brand mb-0 h1" href="/">
                    <img src="{{ url_for('static', filename='logo.png') }}" width="24" height="24" class="d-inline-block align-top" alt="">
                    ViGi
                </a>
                <ul class="navbar-nav">
                    <li class="nav-item">
                        <a class="nav-link {% if request.path == url_for('live.index') %}active{% endif %}" aria-current="page" href="{{ url_for('live.index') }}">
                            <span class="bg-danger recording-dot"></span>
                            Live
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link {% if request.path == url_for('recordings.index') %}active{% endif %}" href="{{ url_for('recordings.index') }}">
                            Recordings
                        </a>
                    </li>
                </ul>
            </div>
        </nav>

        {% block content %}{% endblock %}

        {% block scripts %}
            {{ bootstrap.load_js() }}
        {% endblock %}

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