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

{% load static cosmic_tags %}

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<title>{%block fulltitle%}{% get_site_title %} | {% block title %}Base{% endblock %}{% endblock %}</title>

<link rel="stylesheet" href="{% static 'cosmicdb/adminlte/bootstrap/css/bootstrap.min.css'%}">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
<link rel="stylesheet" href="{% static 'cosmicdb/adminlte/dist/css/AdminLTE.min.css'%}">
<link rel="stylesheet" href="{% static 'cosmicdb/adminlte/dist/css/skins/skin-blue-light.min.css'%}">

<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->

<link rel="stylesheet" href="{% static 'cosmicdb/js/pickadate/themes/default.css'%}">
<link rel="stylesheet" href="{% static 'cosmicdb/js/pickadate/themes/default.date.css'%}">
<link rel="stylesheet" href="{% static 'cosmicdb/js/pickadate/themes/default.time.css'%}">

<!-- Google Font -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic">

{% block prehead %}
{% endblock %}

<style>
    .login-page, .register-page {
        background: initial;
        margin: 50px 0px 0px 0px;
    }
    .login-box, .register-box {
        background: #d2d6de;
        width: 350px;
        margin: 0 auto;
    }
    .login-box-body, .register-box-body {
        background: #d2d6de;
    }
    .login-logo, .register-logo {
        padding-top: 20px;
    }
    .logo-img {
        width: 30px;
        height: 30px;
        margin-right: 10px;
        margin-top: -5px;
    }
    .home-nav-img {
        width: 40px;
        height: 40px;
        margin-top: -10px;
        display: inline-block !important;
    }
    .home-nav-title {
        display: inline-block !important;
        font-weight: bold;
    }
    .home-container {
        margin-top: 50px;
    }
    .login-img {
        margin-right: 10px;
        width: 40px;
        height: 40px;
        margin-top: -7px;
    }
    .save-dialog {
        position: absolute;
        opacity: 0;
        z-index: 1000;
        width: 100px;
        border-bottom: solid 2px rgba(138, 195, 143, 0.33);
        font-weight: bold;
        font-size: 18px;
        background-color: white;
        padding-left: 10px;
        padding-right: 10px;
    }
    .error-dialog {
        position: absolute;
        opacity: 0;
        z-index: 1000;
        width: 100px;
        border-bottom: solid 2px rgba(255, 0, 0, 0.33);
        font-weight: bold;
        font-size: 18px;
        background-color: white;
        padding-left: 10px;
        padding-right: 10px;
    }
    .dateinput {
        background-color: #fff !important;
    }
    .picker__select--month, .picker__select--year {
        padding: 0px !important;
    }
        /* Disable animations to fix the datepicker not showing up sometimes in iOS8+ */
    .picker__holder,
    .picker__frame,
    .picker--opened .picker__holder {
        transition: none !important;
    }
    .select2 {
        width: 100% !important;
    }
    .select2-container--default .select2-selection--single, .select2-selection .select2-selection--single {
        border: 1px solid #d2d6de !important;
        border-radius: 0 !important;
        padding: 6px 12px !important;
        height: 34px !important;
    }
    .select2-container {
        min-width: initial !important;
    }
    .select2-container--default.select2-container--focus .select2-selection--multiple {
        border-color: #d2d6de !important;
    }
    .select2-container--default.select2-container--focus .select2-selection--multiple, .select2-container--default .select2-search--dropdown .select2-search__field {
        border-color: #3c8dbc !important;
    }
    .select2-container--default .select2-selection--multiple {
        border: 1px solid #d2d6de !important;
        border-radius: 0 !important;
    }
    .select2-container--default .select2-selection--multiple .select2-selection__choice {
        background-color: #3c8dbc !important;
        border-color: #367fa9 !important;
        padding: 1px 10px !important;
        color: #fff !important;
    }
    .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
        margin-right: 5px !important;
        color: rgba(255,255,255,0.7) !important;
    }
    .select2-container--default .select2-selection--single .select2-selection__arrow b {
        margin-top: 0 !important;
    }
    .checkboxinput[id$="-DELETE"] {
        margin-left: initial !important;
    }
    .add-another-box {
        border-top:0px;
        height:20px;
    }
    .add-another {
        margin-left:15px;
        cursor: pointer;
    }
    .table-row {
        cursor: pointer;
    }
    th[for$="-DELETE"] {
        width: 50px;
    }
    .shown_on_private {
        display: initial;
    }
    .shown_on_public {
        display: initial;
    }
    {% block style %}
    {% endblock %}
    {% block extrastyle %}
    {% endblock %}
</style>

<script src="{% static 'cosmicdb/js/jquery/jquery-3.2.1.min.js'%}"></script>

{% block extrahead %}
{% endblock %}

</head>

{% block body %}
<body class="hold-transition skin-blue-light sidebar-mini">
</body>
{% endblock %}

<!-- moment -->
<script src="{% static 'cosmicdb/js/moment/moment.js'%}"></script>
<!-- pickadate -->
<script src="{% static 'cosmicdb/js/pickadate/picker.js'%}"></script>
<script src="{% static 'cosmicdb/js/pickadate/picker.date.js'%}"></script>
<script src="{% static 'cosmicdb/js/pickadate/picker.time.js'%}"></script>
<script src="{% static 'cosmicdb/js/pickadate/legacy.js'%}"></script>
<!-- Bootstrap -->
<script src="{% static 'cosmicdb/adminlte/bootstrap/js/bootstrap.min.js'%}"></script>
<!-- AdminLTE App -->
<script src="{% static 'cosmicdb/adminlte/dist/js/adminlte.min.js'%}"></script>

<script type="text/javascript">
    $(document).ready(function(){
        $('.dateinput').pickadate({
            format: 'dd/mm/yyyy',
            selectMonths: true,
            selectYears: 100,
            max: true
        });
    });
    function escapeRegExp(str) {
        return str.replace(/([.*+?^=!:${}()|\[\]\/\\])/g, "\\$1");
    }
    function replaceAll(str, find, replace) {
        return str.replace(new RegExp(escapeRegExp(find), 'g'), replace);
    }
    function addAnother(formset_prefix){
        if(window.hasOwnProperty(formset_prefix+'_before')){
            if(typeof window[formset_prefix+'_before'] === 'function'){
                window[formset_prefix+'_before']();
            }
        }

        var count = Number($('#id_'+formset_prefix+'-TOTAL_FORMS').val());
        var templateRowHTML = $('table.'+formset_prefix+'_table > tbody > tr').last().prop('outerHTML');
        var replacedTemplateHTML = replaceAll(templateRowHTML, formset_prefix+'-'+(count-1), formset_prefix+'-'+(count));
        $('table.'+formset_prefix+'_table > tbody').append(replacedTemplateHTML);
        $('#id_'+formset_prefix+'-TOTAL_FORMS').val(count+1);

        $('table.'+formset_prefix+'_table > tbody > tr').last().find('.form-control').val('');
        $('table.'+formset_prefix+'_table > tbody > tr').last().find('span[id^="error"]').remove();
        $('table.'+formset_prefix+'_table > tbody > tr').last().find('.has-error').removeClass('has-error');

        if(window.hasOwnProperty(formset_prefix+'_after')){
            if(typeof window[formset_prefix+'_after'] === 'function'){
                window[formset_prefix+'_after']();
            }
        }
    }
    function showPageSaved(){
        var saveDialogHTML = '<div id="save_dialog" class="save-dialog">Saved <div class="pull-right"><i class="fa fa-check"></i></div></div>';
        $('section.content').prepend(saveDialogHTML);
        var section_pos = $('section.content div.box').offset();
        var section_width = $('section.content div.box').outerWidth();
        $('#save_dialog').css({
            top: (section_pos.top+5)+'px',
            left: (section_pos.left+section_width-110)+'px'
        });
        $('#save_dialog').delay(500).animate({ opacity: 1 }, 500);
        $('#save_dialog').delay(3000).animate({ opacity: 0 }, 500);
        window.setTimeout(function(){$('#save_dialog').remove();},5000);
    }
    {% if messages %}
        {% for message in messages %}
            {% if message.level == DEFAULT_MESSAGE_LEVELS.SUCCESS %}
                $(document).ready(function(){
                    showPageSaved('{{ message }}');
                });
            {% endif %}
        {% endfor %}
    {% endif %}
    function showPageError(){
        var errorDialogHTML = '<div id="error_dialog" class="error-dialog">Error <div class="pull-right"><i class="fa fa-exclamation-triangle"></i></div></div>';
        $('section.content').prepend(errorDialogHTML);
        var section_pos = $('section.content div.box').position();
        var section_width = $('section.content div.box').outerWidth();
        $('#error_dialog').css({
            top: (section_pos.top+5)+'px',
            left: (section_pos.left+section_width-110)+'px'
        });
        $('#error_dialog').delay(500).animate({ opacity: 1 }, 500);
        $('#error_dialog').delay(3000).animate({ opacity: 0 }, 500);
        window.setTimeout(function(){$('#error_dialog').remove();},5000);
    }
    {% if extra_context.page_error is True %}
        $(document).ready(function(){
            showPageError();
        });
    {% endif %}
    {% block javascript %}
    {% endblock %}
    {% block extrajavascript %}
    {% endblock %}
</script>

</html>