{{ asset_add('styles.css', 'qcr.theme.qcr::css/choices.css') }}
{{ asset_add('scripts.js', 'qcr.theme.qcr::js/theme/login-dropdown.js') }}

<div class="login-dropdown-wrapper-{{ prefix }}{{ id }}">

    <select class="form-control login-dropdown" id="login-options-{{ prefix }}{{ id }}"
            title="What kind of account would you like to login to?">
        {% for login in variable('site_logins', 'site_logins') %}

            {% set value = login.online.isTrue() ? login.url.normalize : login.temporary_url.normalize %}

            <option {{ cookie('login-option') == value ? 'selected' }} data-name="{{ login.name }}" value="{{ value }}">
                {{ login.name }}
            </option>

        {% endfor %}
    </select>

    <div class="login-option">
        <a href="#"
           class="btn btn-light-blue btn-block btn-sm">Login</a>
    </div>

    <script type="text/javascript">

        var select{{ prefix }}{{ id }} = document.getElementById('login-options-{{ prefix }}{{ id }}');
        var toggle{{ prefix }}{{ id }} = document.querySelector('.login-dropdown-wrapper-{{ prefix }}{{ id }} .login-option');

        toggle{{ prefix }}{{ id }}.addEventListener('click', function (event) {

            event.preventDefault();

            window.open(select{{ prefix }}{{ id }}.value);

            Cookies.set('login-option', select{{ prefix }}{{ id }}.value, { expires: 365 });

            return false;

            //$('#login-dropdown-icon').toggleClass('fa-angle-down fa-angle-up');
            //$('#login-dropdown').toggleClass('open');
        });

    </script>

</div>
