<!doctype html>
<html lang="en">
<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" href="/assets/img/favicon.ico"/>

    <title>{% block title %}{{ _("Site_Name") }}{% end %}</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta content="width=device-width, initial-scale=1" name="viewport"/>
    <meta content="" name="description"
          content="Unmanic - a simple tool for optimising your video library to a single, uniform format."/>
    <meta content="" name="author" content="Josh.5"/>

    <!-- Add the application version for scripts to use -->
    <script>
        const UNMANIC_VERSION = '{{ escape(handler.config.read_version()) }}';
    </script>

    <!-- VENDOR STYLES -->
    <link rel="stylesheet"
          href="/assets/vendor/font-awesome/css/font-awesome.css?version={{ escape(handler.config.read_version()) }}"/>
    <link rel="stylesheet"
          href="/assets/vendor/simple-line-icons/css/simple-line-icons.css?version={{ escape(handler.config.read_version()) }}"/>
    <link rel="stylesheet"
          href="/assets/vendor/socicon/css/socicon.css?version={{ escape(handler.config.read_version()) }}"/>
    <link rel="stylesheet"
          href="/assets/vendor/jquery.uniform/themes/default/css/uniform.default.css?version={{ escape(handler.config.read_version()) }}"/>
    {% block vendor_style %}{% end %}

    <!-- BUILT STYLES -->
    <link rel="stylesheet" href="/assets/css/starter.css?version={{ escape(handler.config.read_version()) }}">

    <!-- PLUGIN STYLES -->
    <link rel="stylesheet"
          href="/assets/plugins/extendible-bbcode-parser/xbbcode.css?version={{ escape(handler.config.read_version()) }}"/>

    <!-- BEGIN PAGE LEVEL STYLES -->
    {#TODO: Depricate style for page_plugin_styles#}
    {% block page_plugin_styles %}{% end %}
    {% block style %}{% end %}
    <!-- END PAGE LEVEL STYLES -->

    <!-- THEME STYLES -->
    <link rel="stylesheet" href="/assets/css/components-md.css">
    <link rel="stylesheet" href="/assets/css/plugins-md.css">
    <link rel="stylesheet" href="/assets/css/layout.css">

    <!-- CUSTOM STYLES -->
    <link rel="stylesheet" href="/assets/css/custom.css">
    <link rel="stylesheet" href="/assets/css/lock.css">

    <!-- FONTS -->
    <link href="//fonts.googleapis.com/css?family=Oswald:400,300,700" rel="stylesheet" type="text/css"/>
    <link href="//fonts.googleapis.com/css?family=Open+Sans:400,300,600,700&subset=all" rel="stylesheet" type="text/css"/>

    <!-- CUSTOM HEAD ELEMENTS -->
    {% block head %}{% end %}
</head>
<!-- END HEAD -->

<body class="page-header-fixed page-sidebar-closed-hide-logo page-md">
<!-- BEGIN CONTAINER -->
<div class="wrapper">
    <!-- BEGIN HEADER -->
    <header class="page-header">
        <nav class="navbar mega-menu" role="navigation">
            <div class="container-fluid">
                <div class="clearfix navbar-fixed-top">
                    <!-- Brand and toggle get grouped for better mobile display -->
                    <button type="button" class="navbar-toggle" data-toggle="collapse"
                            data-target=".navbar-responsive-collapse">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="toggle-icon">
                                    <span class="icon-bar"></span>
                                    <span class="icon-bar"></span>
                                    <span class="icon-bar"></span>
                                </span>
                    </button>
                    <!-- End Toggle Button -->
                    <!-- BEGIN LOGO -->
                    <a id="index" class="page-logo" href="/">
                        <img src="/assets/img/logo.png" alt="Logo"> </a>
                    <!-- END LOGO -->
                    <!-- BEGIN TOP RIGHT ACTIONS -->
                    <div class="topbar-actions">
                        {#<!-- BEGIN KOFI SPONSOR BUTTON -->
                        <script type='text/javascript' src='https://ko-fi.com/widgets/widget_2.js'></script>
                        <script type='text/javascript'>kofiwidget2.init('Support Future Development', '#009dc7', 'I2I21F8E1');
                        kofiwidget2.draw();</script>
                        <!-- END KOFI SPONSOR BUTTON -->#}

                        <!-- BEGIN DOCUMENTATION LINK -->
                        <div class="btn-group-red btn-group">
                            <button type="button" class="btn btn-sm"
                                    data-toggle="tooltip" title="Documentation"
                                    onclick="window.open('https://docs.unmanic.app/', '_blank')">
                                <i class="fa fa-question"></i>
                            </button>
                        </div>
                        <!-- END DOCUMENTATION LINK -->

                        <!-- BEGIN SESSION STATUS -->
                        <div class="btn-group-img btn-group">
                            {% if session.level == 0 %}
                            <div class="support-btn-container">
                                <a title="Support future development" class="support-btn"
                                   data-target="#support-future-development-popup" data-toggle="modal"
                                   style="background-color:#009dc7;" href="#"
                                   target="_blank">
                                    <span class="support-btn-text">
                                        <img src="/assets/img/coffee-btn-image.png" alt="donations"
                                             class="support-btn-img">
                                        Support Future Development
                                    </span>
                                </a>
                            </div>
                            {% elif session.level > 0 %}
                            <button type="button" class="btn btn-sm dropdown-toggle" data-toggle="dropdown"
                                    data-hover="dropdown" data-close-others="true">
                                <span>Hi, {{ escape(session.name) }}</span>
                                <img src="{{ escape(session.picture_uri) }}" alt="">
                            </button>
                            <ul class="dropdown-menu-v2" role="menu">
                                {#<li>
                                    <a href="https://docs.unmanic.app/" target="_blank">
                                        <i class="icon-question"></i> Documentation
                                    </a>
                                </li>#}
                                <li class="divider"></li>
                                <li>
                                    <a href="#" class="unmanic-sign-out">
                                        <i class="icon-key"></i> Sign Out
                                    </a>
                                </li>
                            </ul>
                            {% end %}
                        </div>
                        <!-- END SESSION STATUS -->
                    </div>
                    <!-- END TOP RIGHT ACTIONS -->
                </div>
                <!-- BEGIN HEADER MENU -->
                <div class="nav-collapse collapse navbar-collapse navbar-responsive-collapse">
                    <ul class="nav navbar-nav">
                        <li class="dropdown dropdown-fw  {% if handler.name == 'main' %}active open selected{% end %}">
                            <a href="/" class="text-uppercase">
                                <i class="icon-home"></i> Dashboard </a>
                        </li>
                        <li class="dropdown dropdown-fw  {% if handler.name == 'settings' %}active open selected{% end %}">
                            <a href="/settings/?step=general" class="text-uppercase">
                                <i class="icon-settings"></i> Settings </a>
                            {% if handler.name == 'settings' %}
                            <ul class="dropdown-menu dropdown-menu-fw">
                                <li class="dropdown {% if handler.step == 'general' %}active{% end %}">
                                    <a href="/settings/?step=general">
                                        <i class="fa fa-cog"></i> General</a>
                                </li>
                                <li class="dropdown {% if handler.step == 'container' %}active{% end %}">
                                    <a href="/settings/?step=container">
                                        <i class="fa fa-file-archive-o"></i> Container </a>
                                </li>
                                <li class="dropdown {% if handler.step == 'video' %}active{% end %}">
                                    <a href="/settings/?step=video">
                                        <i class="fa fa-file-video-o"></i> Video Encoding </a>
                                </li>
                                <li class="dropdown {% if handler.step == 'audio' %}active{% end %}">
                                    <a href="/settings/?step=audio">
                                        <i class="fa fa-file-audio-o"></i> Audio Encoding </a>
                                </li>
                                <li class="dropdown {% if handler.step == 'advanced' %}active{% end %}">
                                    <a href="/settings/?step=advanced">
                                        <i class="fa fa-unlock-alt"></i> Advanced Options </a>
                                </li>
                            </ul>
                            {% end %}
                        </li>
                        <li class="dropdown dropdown-fw  {% if handler.name == 'plugins' %}active open selected{% end %}">
                            <a href="/plugins/" class="text-uppercase">
                                <i class="icon-puzzle"></i> Plugins </a>
                        </li>
                    </ul>
                </div>
                <!-- END HEADER MENU -->
            </div>
            <!--/container-->
        </nav>
    </header>
    <!-- END HEADER -->
    <div class="container-fluid">
        <div class="page-content" {% if handler.name != 'settings' %}style="padding-top:30px"{% end %} >
            <!-- BEGIN PAGE BASE CONTENT -->
            {% block content %}{% end %}
            {% include "./global/support-future-development.html" %}
            <!-- END PAGE BASE CONTENT -->
        </div>

        <!-- BEGIN GLOBAL POPUPS -->
        {# :components_bootstrap_select: #}
        <div id="unmanic-filebrowser-popup" class="modal fade" tabindex="-1"></div>
        <!-- BEGIN FOOTER -->
        <p class="copyright">
            Version - {{ escape(handler.config.read_version()) }}
            <br>
            2018 © Unmanic by Josh Sunnex.
            ·
            <a title="Privacy Policy" href="#" target="_blank"
               data-toggle="modal" data-target="#privacy-policy-popup">
                Privacy Policy
            </a>
        </p>

        {% include "./global/privacy_policy.html" %}
        <a href="#index" class="go2top">
            <i class="icon-arrow-up"></i>
        </a>
        <!-- END FOOTER -->
    </div>
</div>
<!-- END CONTAINER -->


<!-- VENDOR SCRIPTS -->
<script src="/assets/vendor/jquery/dist/jquery.js?version={{ escape(handler.config.read_version()) }}"></script>
<script src="/assets/vendor/js-cookie/src/js.cookie.js?version={{ escape(handler.config.read_version()) }}"></script>
<script src="/assets/vendor/jquery-blockui/jquery.blockUI.js?version={{ escape(handler.config.read_version()) }}"></script>
<script src="/assets/vendor/jquery.uniform/dist/jquery.uniform.min.js?version={{ escape(handler.config.read_version()) }}"></script>
{# TODO: Bump to latest version in NPM repo #}
<script src="/assets/plugins/jquery-slimscroll/jquery.slimscroll.js?version={{ escape(handler.config.read_version()) }}"></script>
<script src="/assets/vendor/handlebars/dist/handlebars.js?version={{ escape(handler.config.read_version()) }}"></script>

<script src="/assets/vendor/bootstrap-sass/assets/javascripts/bootstrap.js?version={{ escape(handler.config.read_version()) }}"></script>
<script src="/assets/vendor/bootstrap-hover-dropdown/bootstrap-hover-dropdown.js?version={{ escape(handler.config.read_version()) }}"></script>
<script src="/assets/vendor/bootstrap-switch/dist/js/bootstrap-switch.js?version={{ escape(handler.config.read_version()) }}"></script>
<script src="/assets/vendor/bootstrap-select/dist/js/bootstrap-select.js?version={{ escape(handler.config.read_version()) }}"></script>
{% block vendor_scripts %}{% end %}

<!-- BUILT SCRIPTS -->
<script type="module" src="/assets/js/starter.js?version={{ escape(handler.config.read_version()) }}"></script>

<!-- PLUGIN SCRIPTS -->

<!-- BEGIN PAGE LEVEL PLUGIN SCRIPTS -->
{#TODO: Depricate plugins for page_plugins#}
{% block page_plugins %}{% end %}
{% block plugins %}{% end %}
<!-- END PAGE LEVEL PLUGIN SCRIPTS -->

<!-- THEME SCRIPTS -->
<script src="/assets/js/app.js?version={{ escape(handler.config.read_version()) }}"></script>
<script src="/assets/js/lock.js?version={{ escape(handler.config.read_version()) }}"></script>
<script src="/assets/js/layout.js?version={{ escape(handler.config.read_version()) }}"></script>
<script src="/assets/js/quick-sidebar.js?version={{ escape(handler.config.read_version()) }}"></script>

<!-- BEGIN PAGE LEVEL THEME SCRIPTS -->
{#TODO: Depricate plugins for page_plugins#}
{% block page_theme_scripts %}{% end %}
{% block scripts %}{% end %}
<!-- END PAGE LEVEL THEME SCRIPTS -->

<!-- CUSTOM SCRIPTS -->
<script src="/assets/js/session.js?version={{ escape(handler.config.read_version()) }}"></script>
<script src="/assets/plugins/extendible-bbcode-parser/xbbcode.js?version={{ escape(handler.config.read_version()) }}"></script>
<script src="/assets/js/templates.js?version={{ escape(handler.config.read_version()) }}"></script>
<script src="/assets/js/file-browser.js?version={{ escape(handler.config.read_version()) }}"></script>

<!-- BEGIN CUSTOM INLINE SCRIPTS -->
{% block inline_scripts %}{% end %}
<!-- END CUSTOM INLINE SCRIPTS -->

</body>

</html>
