{% extends "admin/base.html" %}
{% load i18n staticfiles admin_interface_tags %}

{% block extrastyle %}
{% get_admin_interface_theme as theme %}
<style type="text/css">

{% if theme.active %}

    #header {
        height:auto;
        min-height:40px;
        background:{{ theme.css_header_background_color }};
        color:{{ theme.css_header_text_color }};
    }

    #header #user-tools a {
        color:{{ theme.css_header_link_color }};
    }

    #header #user-tools a:hover,
    #header #user-tools a:active {
        color:{{ theme.css_header_link_hover_color }};
        border-bottom-color:rgba(255, 255, 255, 0.5);
    }

    #branding h1 img.logo {
        max-height:100px;
        margin-top:10px;
        margin-bottom:10px;
        margin-right:15px;
    }

    #branding h1 {
        color:{{ theme.css_header_title_color }};
    }

    #branding h1 img+span {
        white-space:nowrap;
    }

    .module h2,
    .module caption,
    .module.filtered h2 {
        background:{{ theme.css_module_background_color }};
        color:{{ theme.css_module_text_color }};
    }

    .module a.section:link,
    .module a.section:visited {
        color:{{ theme.css_module_link_color }};
    }

    .module a.section:active,
    .module a.section:hover {
        color:{{ theme.css_module_link_hover_color }};
    }

    div.breadcrumbs {
        background:{{ theme.css_module_background_color }};
        color:{{ theme.css_module_text_color }};
    }

    div.breadcrumbs a {
        color:{{ theme.css_module_link_color }};
    }

    div.breadcrumbs a:hover,
    div.breadcrumbs a:active {
        color:{{ theme.css_module_link_hover_color }} !important;
    }

    fieldset.collapse {
        border: 1px solid transparent;
    }

    fieldset.collapse.collapsed a.collapse-toggle {
        color:{{ theme.css_generic_link_color }} !important;
        font-weight: bold;
        text-transform: lowercase;
    }

    fieldset.collapse.collapsed a.collapse-toggle:hover,
    fieldset.collapse.collapsed a.collapse-toggle:active {
        color:{{ theme.css_generic_link_hover_color }} !important;
    }

    fieldset.collapse a.collapse-toggle {
        color:{{ theme.css_module_link_color }} !important;
        font-weight: bold;
        text-transform: lowercase;
    }

    fieldset.collapse a.collapse-toggle:hover,
    fieldset.collapse a.collapse-toggle:active {
        color:{{ theme.css_module_link_hover_color }} !important;
    }


    .inline-group h2,
    .inline-group h2 {
        background:{{ theme.css_module_background_color }};
        color:{{ theme.css_module_text_color }};
    }

    .selector-chosen h2 {
        background:{{ theme.css_module_background_color }} !important;
        color:{{ theme.css_module_text_color }} !important;
    }

    a:link, a:visited {
        color:{{ theme.css_generic_link_color }};
    }

    a:hover {
        color:{{ theme.css_generic_link_hover_color }};
    }

    .button, input[type=submit], input[type=button], .submit-row input, a.button {
        background:{{ theme.css_save_button_background_color }};
        color:{{ theme.css_save_button_text_color }};
    }

    .button:active, input[type=submit]:active, input[type=button]:active,
    .button:hover, input[type=submit]:hover, input[type=button]:hover {
        background:{{ theme.css_save_button_background_hover_color }};
        color:{{ theme.css_save_button_text_color }};
    }

    .button.default, input[type=submit].default, .submit-row input.default {
        background:{{ theme.css_save_button_background_color }};
        color:{{ theme.css_save_button_text_color }};
    }

    .button.default:active, input[type=submit].default:active,
    .button.default:hover, input[type=submit].default:hover {
        background:{{ theme.css_save_button_background_hover_color }};
        color:{{ theme.css_save_button_text_color }};
    }

    .submit-row a.deletelink:link,
    .submit-row a.deletelink:visited {
        background:{{ theme.css_delete_button_background_color }};
        color:{{ theme.css_delete_button_text_color }};
    }

    .submit-row a.deletelink:hover {
        background:{{ theme.css_delete_button_background_hover_color }} !important;
        color:{{ theme.css_delete_button_text_color }};
    }

    /*
    #changelist table tbody tr.selected {
        background-color:#FFFFCC;
    }
    */

    #changelist .paginator {
        margin-top:-1px !important; /* merge 2 borders into 1 */
        line-height:42px;
    }

    .paginator a,
    .paginator a:link,
    .paginator a:visited,
    .paginator .this-page {
        padding:7px 12px !important;
        {% if theme.css_module_rounded_corners %}border-radius:4px;{% endif %}
    }

    .paginator a,
    .paginator a:link,
    .paginator a:visited {
        background-color:#ffffff !important;
        color:{{ theme.css_generic_link_color }} !important;
    }

    .paginator a:hover,
    .paginator a:active {
        background-color:#f8f8f8 !important;
        color:{{ theme.css_generic_link_hover_color }} !important;
    }

    .paginator .this-page {
        background-color:{{ theme.css_module_background_color }} !important;
        color:{{ theme.css_module_link_color }} !important;
    }

    .paginator a,
    .paginator .this-page {
        margin-left:0px;
    }

    .paginator .this-page,
    .paginator a.end {
        margin-right:25px;
    }

    .paginator .this-page + a:not(.showall)  {
        margin-left:-25px !important;
    }

    body .paginator a.showall,
    body .paginator a.showall:link,
    body .paginator a.showall:visited {
        margin-left:20px;
        color:{{ theme.css_generic_link_color }} !important;
    }

    body .paginator a.showall:hover,
    body .paginator a.showall:active {
        color:{{ theme.css_generic_link_hover_color }} !important;
    }

    /* OTHER FIXES */

    /* reduced width */
    .login #container {
        width:320px !important;
        min-width:320px !important;
    }

    /* same lateral padding as in logged view */
    .login #header {
        padding:10px 25px !important;
    }

    /* login button right aligned */
    .login #header #branding h1 img+span {
        display:block;
    }

    /* login button right aligned */
    .login .submit-row {
        padding-left:0 !important;
        text-align:right !important;
    }

    /* top-right buttons color on hover -> just a lighten grey */
    .object-tools a:hover,
    .object-tools li:hover a {
        background-color:#AAAAAA;
    }

    /* fix help text icon on newline */
    .inline-group thead th {
        white-space:nowrap;
    }

    .inline-group thead th img {
        vertical-align: -2px;
        margin-left: 5px;
    }

    form .form-row p.file-upload > a {
        margin-right:10px;
    }

    form .form-row p.file-upload .clearable-file-input {
        display:inline-block;
    }

    form .wide p.help {
        padding-left:10px !important;
    }

    textarea.tinymce ~ p.help {
        margin-top:5px !important;
    }

    .aligned p.file-upload {
        display:table;
    }

    /* fix lateral padding to align text with field labels */
    .module h2,
    .dashboard .module caption,
    .inline-group h2,
    .module.filtered h2,
    .inline-group h2 {
        padding:8px 10px;
        {% if theme.css_module_rounded_corners %}border-radius:4px;{% endif %}
    }

    .module.filtered h2 {
        border-bottom-left-radius:0;
        border-bottom-right-radius:0;
    }

    .module.filtered #changelist-filter {
        border-bottom-left-radius:4px;
        border-bottom-right-radius:4px;
    }

    .module.filtered #changelist-filter select {
        background-color:#ffffff;
    }

    .module.filtered #changelist-filter li.selected a,
    .module.filtered #changelist-filter li.selected a:hover {
        color: {{ theme.css_generic_link_color }};
    }

    #content-related {
        {% if theme.css_module_rounded_corners %}border-radius:4px;{% endif %}
    }

    /* selector chooseall / clearall color on hover -> just a lighten grey */
    a.selector-chooseall:hover, a.selector-clearall:hover {
        color:#888888 !important;
    }

    .inline-related h3 {
        padding:6px 10px !important;
    }

    /*
    .inline-group .tabular thead th:last-child:not([class]):not([style]) {
        text-align:center;
    }
    */

    /*.inline-group .tabular tr.has_original td.original,   */
    .inline-group .tabular tr td.delete {
        vertical-align:middle !important;
        text-align:center !important;
    }

    .inline-group .tabular tr td.delete a.inline-deletelink {
        float:none;
        display:inline-block;
    }

    /* improve django-modeltranslation support - https://github.com/deschler/django-modeltranslation/pull/313/commits */

    #content h1 select {
        text-transform:uppercase;
        margin-left:15px;
    }

    .ui-tabs .ui-tabs-nav {
        padding:10px 0 0 10px !important;
    }

    .ui-tabs .ui-tabs-nav li {
        margin-left:-1px !important;
    }

    .ui-tabs .ui-tabs-nav li a {
        outline:none;
        background-color:#f8f8f8 !important;
        border:1px solid #eeeeee !important;
        border-bottom:none !important;
        text-transform:uppercase;

        padding:7px 14px 8px 14px !important;
        margin-top:1px !important;

    }

    .ui-tabs .ui-tabs-nav li.ui-tabs-active a,
    .ui-tabs .ui-tabs-nav li.ui-tabs-selected a {

        padding:8px 14px 8px 14px !important;
        margin-top:0px !important;

        margin-bottom:-1px !important;

        background-color:#FFFFFF !important;
        color:{{ theme.css_module_background_color }} !important;

        border-bottom:1px solid #FFFFFF !important;
    }

    .inline-group .tabular .ui-tabs .ui-tabs-panel {
        padding:8px !important;
    }

    #changelist .row1:not(.selected):hover,
    #changelist .row2:not(.selected):hover {
        background:#f9f9f9;
    }

    .row2 {
        background:#fcfcfc;
    }

    .row2 .ui-tabs .ui-tabs-nav li a {
        background-color:#f5f5f5 !important;
        border:1px solid #ebebeb !important;
    }

    .row2 .ui-tabs .ui-tabs-nav li.ui-tabs-active a,
    .row2 .ui-tabs .ui-tabs-nav li.ui-tabs-selected a {
        background-color:#fcfcfc !important;
        border-bottom:1px solid #fcfcfc !important;
    }

    .list-filter-dropdown {
        margin-top:10px;
        margin-bottom:20px;
    }

    .list-filter-dropdown select {
        width:90%;
        margin-right:5%;
    }


    /* ckeditor + light theme - https://github.com/Ikimea/ckeditor-light-theme */

    .cke_inner, .cke_wysiwyg_frame {
        border-top-left-radius: 4px !important;
        border-top-right-radius: 4px !important;
        border-bottom-left-radius: 4px !important;
        border-bottom-right-radius: 4px !important;
    }

    .cke_top {
        background: #f6f6f6 !important;
        border-top: none;

        border-top-left-radius: 4px !important;
        border-top-right-radius: 4px !important;

        -moz-box-shadow: none !important;
        -webkit-box-shadow: none !important;
        box-shadow: none !important;
    }

    .cke_bottom {
        background: #f6f6f6 !important;
        border-top: 1px solid #efefef !important;

        border-bottom-left-radius: 4px !important;
        border-bottom-right-radius: 4px !important;
    }

    .cke_source {
        padding: 13px 15px !important;
        box-sizing: border-box !important;
    }

    a.cke_button_on {
        -moz-box-shadow: none !important;
        -webkit-box-shadow: none !important;
        box-shadow: none !important;
        background-color: rgba(0,0,0,0.1) !important;
        border-radius: 4px !important;
    }

    .cke_resizer {
        border-color: transparent #999 transparent transparent !important;
    }

    {% if theme.css %}
        {{ theme.css|safe }}
    {% endif %}

{% else %}

    #branding h1 img.logo {
        display:none;
    }

{% endif %}

</style>
{% endblock %}

{% block extrahead %}
{% endblock %}

{% block branding %}
{% get_admin_interface_theme as theme %}
<h1 id="site-name">
    {% if theme.active %}
        {% if theme.logo_visible and theme.logo %}
        <img class="logo" src="{{ theme.logo.url }}" width="{{ theme.logo.width }}" height="{{ theme.logo.height }}" />
        {% endif %}
        {% if theme.title_visible %}
        <span>{% if theme.title %}{% trans theme.title %}{% else %}{% trans 'Django administration' %}{% endif %}</span>
        {% endif %}
    {% else %}
        {% trans 'Django administration' %}
    {% endif %}
</h1>
{% endblock %}

{% block bodyclass %}admin-interface flat-theme{% endblock %}

{% block sidebar %}
{% endblock %}