{% extends 'admin/base.html' %}

{% load i18n static %}


{% block welcome-msg %}
    <div class="sidebar-username">
        <strong>{% firstof user.get_short_name user.get_username %}</strong>
    </div>
    <button class="btn btn-link btn-light toggle-sidebar-btn" data-role="sidebar-toggle">
        <i class="fa fa-chevron-left"></i>
        <i class="fa fa-chevron-right"></i>
    </button>
{% endblock %}


{% block extrastyle %}
    {% block css %}
        <link href='https://fonts.googleapis.com/css?family=Roboto:400,100,300,500,700,900' rel='stylesheet' type='text/css'>
        <link rel="stylesheet" href="{{ STATIC_URL }}cap/components/bootstrap/bootstrap.min.css">
        <link rel="stylesheet" href="{{ STATIC_URL }}cap/components/jquery-ui/jquery-ui.min.css">
        <link rel="stylesheet" href="{{ STATIC_URL }}cap/components/font-awesome/font-awesome.min.css">
        <link rel="stylesheet" href="{{ STATIC_URL }}cap/components/qtip2/jquery.qtip.min.css">
        <link rel="stylesheet" href="{{ STATIC_URL }}cap/components/fancybox/jquery.fancybox.min.css">
        <link rel="stylesheet" href="{{ STATIC_URL }}cap/components/bootstrap-treeview/bootstrap-treeview.min.css">
        <link rel="stylesheet" href="{{ STATIC_URL }}cap/components/bootstrap-tagsinput/bootstrap-tagsinput.css">
        <link rel="stylesheet" href="{{ STATIC_URL }}cap/css/common.css">
        <link rel="stylesheet" href="{{ STATIC_URL }}cap/css/sidebar.css">
        <style>
            :root {
              --primary: #79aec8;
              --secondary: #417690;
              --accent: #f5dd5d;
              --primary-fg: #fff;

              --body-fg: #333;
              --body-bg: #fff;
              --body-quiet-color: #666;
              --body-loud-color: #000;

              --header-color: #ffc;
              --header-branding-color: var(--accent);
              --header-bg: var(--secondary);
              --header-link-color: var(--primary-fg);

              --breadcrumbs-fg: #c4dce8;
              --breadcrumbs-link-fg: var(--body-bg);
              --breadcrumbs-bg: var(--primary);

              --link-fg: #447e9b;
              --link-hover-color: #036;
              --link-selected-fg: #5b80b2;

              --hairline-color: #e8e8e8;
              --border-color: #ccc;

              --error-fg: #ba2121;

              --message-success-bg: #dfd;
              --message-warning-bg: #ffc;
              --message-error-bg: #ffefef;

              --darkened-bg: #f8f8f8; /* A bit darker than --body-bg */
              --selected-bg: #e4e4e4; /* E.g. selected table cells */
              --selected-row: #ffc;

              --button-fg: #fff;
              --button-bg: var(--primary);
              --button-hover-bg: #609ab6;
              --default-button-bg: var(--secondary);
              --default-button-hover-bg: #205067;
              --close-button-bg: #888; /* Previously #bbb, contrast 1.92 */
              --close-button-hover-bg: #747474;
              --delete-button-bg: #ba2121;
              --delete-button-hover-bg: #a41515;

              --object-tools-fg: var(--button-fg);
              --object-tools-bg: var(--close-button-bg);
              --object-tools-hover-bg: var(--close-button-hover-bg);
            }
        </style>
    {% endblock %}
{% endblock %}


{% block branding %}
    <a href="{% url 'admin:index' %}">
        <img src="{{ STATIC_URL }}img/site-logo.png" id="branding-logo">
    </a>
{% endblock %}


{% block extrahead %}
    <script>
        lang_code = '{{ LANGUAGE_CODE }}';
        csrf='{{ csrf_token }}';
    </script>
    <link rel="shortcut icon" href="{% static "cap/img/favicon.ico" %}">
{% endblock %}


{% block footer %}
    {% block js %}
        <script src="{{ STATIC_URL }}cap/components/jquery.min.js"></script>
        <script src="{{ STATIC_URL }}cap/components/jquery.form.min.js"></script>
        <script src="{{ STATIC_URL }}cap/components/jquery.cookie.js"></script>
        <script src="{{ STATIC_URL }}cap/components/bootstrap/bootstrap.min.js"></script>
        <script src="{{ STATIC_URL }}cap/components/bootstrap-treeview/bootstrap-treeview.min.js"></script>
        <script src="{{ STATIC_URL }}cap/components/fancybox/jquery.fancybox.min.js"></script>
        <script src="{{ STATIC_URL }}cap/components/qtip2/jquery.qtip.min.js"></script>
        <script src="{{ STATIC_URL }}cap/components/bootstrap-tagsinput/bootstrap-tagsinput.js"></script>
        <script src="{{ STATIC_URL }}jquery/jquery.ba-bbq.js"></script>
        <script src="{{ STATIC_URL }}jquery/ajax-csrf.js"></script>
        <script src="{{ STATIC_URL }}cap/components/jquery-ui/jquery-ui.min.js"></script>
        <script src="{{ STATIC_URL }}cap/components/jquery-ui/i18n/{{ LANGUAGE_CODE }}.js"></script>
        <script src="{{ STATIC_URL }}cap/js/sidebar.js"></script>

        <script>
            $(function() {
                $("[data-role=datepicker]").datepicker({
                    dateFormat: 'dd/mm/yy'
                });
            });
        </script>
    {% endblock %}
    {{ block.super }}
{% endblock %}