{% load static %}
{% load i18n %}
<li class="nav-header">
    <div class="profile-element" style="height: 65px">
        <div href="http://www.jumpserver.org" target="_blank" style="width: 100%; background-image: url({% static 'img/header-profile.png' %})">
             <img alt="logo" height="55" width="185" style="margin-right: 5px" src="{{ LOGO_TEXT_URL }}"/>
        </div>
    </div>
    <div class="logo-element">
        <img alt="image" height="40" src="{{ LOGO_URL }}"/>
    </div>
    {% if ADMIN_OR_AUDIT_ORGS and request.COOKIES.IN_ADMIN_PAGE != 'No' %}
        {% if ADMIN_OR_AUDIT_ORGS|length > 1 or not CURRENT_ORG.is_default %}
            <div>
                <a class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false" style="display: block; background-color: transparent; color: #8095a8; padding: 14px 20px 14px 25px">
                    <i class="fa fa-bookmark" style="width: 14px; "></i>
                    <span class="nav-label" style="padding-left: 7px">
                        {{ CURRENT_ORG.name }}
                    </span>
                    <span class="fa fa-sort-desc pull-right"></span>
                </a>
                <ul class="dropdown-menu" style="min-width: 220px;max-width: 400px;max-height: 400px; overflow: auto">
                    <input type="text" id="left-side-org-filter" placeholder="{% trans 'Search' %}" class="form-control">
                    {% for org in ADMIN_OR_AUDIT_ORGS %}
                        <li>
                            <a class="org-dropdown" href="{% url 'orgs:org-switch' pk=org.id %}" data-id="{{ org.id }}">
                                {{ org.name }}
                                {% if org.id == CURRENT_ORG.id %}
                                    <span class="fa fa-circle" style="padding-top: 5px; color: #1ab394"></span>
                                {% endif %}
                            </a>
                        </li>
                    {% endfor %}
                </ul>
            </div>
        {% endif %}
    {% endif %}
</li>
<script>
var orgsRef;
$(document).ready(function () {
    orgsRef = $(".org-dropdown");
}).on('click', '#left-side-org-filter', function (e) {
    e.preventDefault();
    e.stopPropagation();
}).on('keyup', '#left-side-org-filter', function () {
    var input = $("#left-side-org-filter").val();
    if (!input) {
        orgsRef.show();
        return
    }
    orgsRef.each(function (i, v) {
        var itemRef = $(v);
        var orgItemText = itemRef.text().trim();
        var findIndex = orgItemText.indexOf(input);
        if (findIndex === -1) {
            itemRef.hide();
        } else {
            itemRef.show();
        }
    });
})
</script>
