{#
    LimeSurvey
    Copyright (C) 2007-2017 The LimeSurvey Project Team / Louis Gac
    All rights reserved.
    License: GNU/GPL License v2 or later, see LICENSE.php
    LimeSurvey is free software. This version may have been modified pursuant
    to the GNU General Public License, and as distributed it includes or
    is derivative of works licensed under the GNU General Public License or
    other free or open source software licenses.
    See COPYRIGHT.php for copyright notices and details.

    (¯`·._.·(¯`·._.· Custom Header  ·._.·´¯)·._.·´¯)

    If you extend a template, and want to add custom headers (js, css, scripts, meta etc), you'd rather do it here.
    This file is empty in Vanilla, and contains the code for the background option in Fruity
#}

{# Have no-more-tables activated on every screen size or completely off #}
{% if (aSurveyInfo.options.notables == "2" ) %}
    {{ registerTemplateCssFile('./css/noTablesGeneral.css') }}
{% elseif (aSurveyInfo.options.notables == "1" ) %}
    {{ registerTemplateCssFile('./css/noTablesOnMobile.css') }}
{% endif %}

{# Custom backgroud option #}
<style>
    {% if (aSurveyInfo.options.backgroundimage == "on" and imageSrc(aSurveyInfo.options.backgroundimagefile )) %}
        body {
            background-image: url('{{ imageSrc(aSurveyInfo.options.backgroundimagefile ) }}');
            background-attachment: fixed;
            background-size: cover;

        }

        body .top-container {
            background-color: rgba(236, 240, 241, 0.2);
        }
    {% endif %}

    {% if (aSurveyInfo.options.brandlogo == "on" ) %}
        body .top-container {
            margin-top: 70px;
        }
    {% endif %}

    body {
         padding-bottom: 10px;
         /*padding-top: 60px;!* now is redefine in JS to fit any title length *!*/
         background-color:{{ aSurveyInfo.options.bodybackgroundcolor  }} ;
         color: {{ aSurveyInfo.options.fontcolor  }};
    }

    .navbar-default .navbar-nav > li > a:hover {
        color: {{ aSurveyInfo.options.fontcolor  }};
    }


    .question-container {
      background-color: {{ aSurveyInfo.options.questionbackgroundcolor  }};

      {% if (aSurveyInfo.options.questionborder == "on" ) %}
        border:  1px solid #e6e6e6;
      {% endif %}

      {% if (aSurveyInfo.options.questioncontainershadow == "on" and aSurveyInfo.options.questionborder == "on" ) %}
        box-shadow: 0 1px 2px rgba(0,0,0,.2);
      {% endif %}
    }

    {% set checkicon = '"\\' ~  aSurveyInfo.options.checkicon   ~ '"' %}
    .checkbox-item input[type="checkbox"]:checked + label::after, .checkbox-item input[type="radio"]:checked + label::after {
        content: {{ checkicon }};
    }

    {% if (aSurveyInfo.options.animatecheckbox == "on" ) %}

        {% if (aSurveyInfo.options.checkboxanimationduration < 1) %}
            {% set checkboxanimationduration = 500 %}
        {% else %}
            {% set checkboxanimationduration = aSurveyInfo.options.checkboxanimationduration %}
        {% endif %}

        .checkbox-item input[type="checkbox"]:checked + label::after{
            animation-name: {{ aSurveyInfo.options.checkboxanimation  }};
            animation-duration: {{ checkboxanimationduration }}ms;
            animation-fill-mode: both;
            animation-iteration-count: 1;
            display: inline-block;
            -webkit-transform: none;
            -ms-transform: none;
            -o-transform: none;
            transform: none;
        }
        .checkbox-item input[type="checkbox"] + label::after{
            display: none;
            -webkit-transform: none;
            -ms-transform: none;
            -o-transform: none;
            transform: none;
        }
    {% endif %}

    {% if (aSurveyInfo.options.animateradio == "on" ) %}

        {% if (aSurveyInfo.options.radioanimationduration < 1) %}
            {% set radioanimationduration = 500 %}
        {% else %}
            {% set radioanimationduration = aSurveyInfo.options.radioanimationduration %}
        {% endif %}

        .radio-item input[type="radio"]:checked + label::after{
            animation-name: {{ aSurveyInfo.options.radioanimation  }};
            animation-duration: {{ radioanimationduration }}ms;
            animation-fill-mode: both;
            animation-iteration-count: 1;
            display: inline-block;
            -webkit-transform: none;
            -ms-transform: none;
            -o-transform: none;
            transform: none;
        }
        .radio-item input[type="radio"] + label::after{
            display:none;
            -webkit-transform: none;
            -ms-transform: none;
            -o-transform: none;
            transform: none;
        }
    {% endif %}

    {% if (aSurveyInfo.options.animatequestion == "on" ) %}

        {% if (aSurveyInfo.options.questionanimationduration < 1) %}
            {% set questionanimationduration = 500 %}
        {% else %}
            {% set questionanimationduration = aSurveyInfo.options.questionanimationduration %}
        {% endif %}

        .question-container {
            animation-name: {{ aSurveyInfo.options.questionanimation  }};
            animation-duration: {{ questionanimationduration }}ms;
            animation-fill-mode: none; /* Issue #18648: Unable to upload a file with theme animations enabled - Set it to none to avoid overlay */
        }
    {% endif %}

    {% if (aSurveyInfo.options.animatealert == "on" ) %}

        {% if (aSurveyInfo.options.alertanimationduration < 1) %}
            {% set alertanimationduration = 500 %}
        {% else %}
            {% set alertanimationduration = aSurveyInfo.options.alertanimationduration %}
        {% endif %}

        .alert {
            animation-name: {{ aSurveyInfo.options.alertanimation  }};
            animation-duration: {{ alertanimationduration }}ms;
            animation-fill-mode: both;
        }
    {% endif %}

    {% if (aSurveyInfo.options.animatebody == "on" ) %}

        {% if (aSurveyInfo.options.bodyanimationduration < 1) %}
            {% set bodyanimationduration = 500 %}
        {% else %}
            {% set bodyanimationduration = aSurveyInfo.options.bodyanimationduration %}
        {% endif %}

        #outerframeContainer {
            animation-name: {{ aSurveyInfo.options.bodyanimation  }};
            animation-duration: {{ bodyanimationduration }}ms;
            animation-fill-mode: none;  /* Issue #18648: Unable to upload a file with theme animations enabled - Set it to none to avoid overlay */
        }
    {% endif %}

    {% if (aSurveyInfo.options.zebrastriping == "on" ) %}
    .question-container:nth-of-type(odd){
        background-color: {{ darkencss(aSurveyInfo.options.questionbackgroundcolor)  }}
    }
    .question-container:nth-of-type(even){
        background-color: {{ lightencss(aSurveyInfo.options.questionbackgroundcolor)  }}
    }
    {% endif %}

    {% if (aSurveyInfo.options.stickymatrixheaders == "on" ) %}

        .sticky .ls-heading.stickyBar {
            background: white;
            opacity: 1;
        }
        .sticky .ls-heading.stickyBar>td,
        .sticky .ls-heading.stickyBar>th {
            word-break: break-word;
        }

        .sticky .ls-heading.stickyBar>td:first-child {
            visibility: hidden;
        }

        .sticky .ls-heading:nth-child(n+2) {
            display: none;
            background: white;
        }

        tbody>.ls-heading-repeat:not(.stickyBar) {
            display: none;
        }
        @media (max-width: 1024px){
            .sticky .ls-heading.stickyBar {
                display: none;
            }
        }
    {% endif %}

    {% if (aSurveyInfo.options.greyoutselected == "on" ) %}

        tr.radio-list.selected{
            opacity: 0.5;
        }
        tr.radio-list.selected:hover,
        tr.radio-list.selected:active{
            opacity: 1;
        }
    {% endif %}

    {% if (aSurveyInfo.options.crosshover == "on" ) %}
        @media (min-width: 1024px){
            table.ls-answers.table-hover,
            table.ls-answers.table-col-hover
            {
                overflow: hidden;
                }

            table.ls-answers.table-hover>tbody>tr:hover td,
            table.ls-answers.table-hover>tbody>tr:hover th,
            table.ls-answers.table-col-hover>tbody>tr:hover td,
            table.ls-answers.table-col-hover>tbody>tr:hover th {
                background-color: {{ darkencss(aSurveyInfo.options.questionbackgroundcolor, 50, 0.2) }};
            }

            table.ls-answers.table-hover>tbody>tr>td, th {
                position: relative;
            }
            table.ls-answers.table-col-hover>tbody>tr>td, th {
                position: relative;
            }
            table.ls-answers.table-hover>tbody>tr>td:hover::after,
            table.ls-answers.table-col-hover>tbody>tr>td:hover::after {
                content: "";
                position: absolute;
                background-color: {{ darkencss(aSurveyInfo.options.questionbackgroundcolor, 50, 0.2) }};
                left: 0;
                top: -5000px;
                height: 10000px;
                width: 100%;
                z-index: 2;
                pointer-events: none;
            }
        }
    {% endif %}

</style>


{% if (aSurveyInfo.options.stickymatrixheaders == "on" ) %}
    {{ registerTemplateScript( "scripts/sticky.min.js", "POS_BEGIN" ) }}
    {{ registerScript("StickyMatrixHeaderScript", "
        var stickyRows = new StickyTableRows();
        $('thead>tr.ls-heading').each(function(itrt, item){
            if($(item).closest('div.question-container').hasClass('array-flexible-dual-scale')) {
                return;
            }
            stickyRows.add(item);
        });
        stickyRows.init();
    ", "POS_POSTSCRIPT") }}
{% endif %}

{% if (aSurveyInfo.options.greyoutselected == "on" ) %}
    {{ registerScript("GreyOutSelectedScript", "
    $('td.radio-item > input[type=radio]').on('click', function(){
        if($(this).val() != '' ) {
            $(this).closest('tr.radio-list').addClass('selected');
        } else {
            $(this).closest('tr.radio-list').removeClass('selected');
        }
    })
    ", "POS_POSTSCRIPT") }}
{% endif %}
