{% load seahub_tags avatar_tags group_avatar_tags i18n %}
{% load url from future %}

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>{% block sub_title %}{% endblock %}{{ site_title }}</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="keywords" content="{% trans "File Collaboration Team Organization" %}" />
<link rel="icon" type="image/x-icon" href="{{ MEDIA_URL }}img/favicon.png?t=1447047922" />
<!--[if IE]>
<link rel="shortcut icon" href="{{ MEDIA_URL }}img/favicon.png?t=1447047922"/>
<![endif]-->
<link rel="stylesheet" type="text/css" href="{{ MEDIA_URL }}css/seahub.min.css?t=1447047922" />
{% block extra_style %}{% endblock %}
{% if branding_css != '' %}<link rel="stylesheet" type="text/css" href="{{ MEDIA_URL }}{{ branding_css }}" />{% endif %}
</head>

<body>
    <div id="wrapper" class="{{ LANGUAGE_CODE }}">
        {% block info_bar_message %}
        {% if request.user.is_authenticated and request.cur_note %}
        <div id="info-bar">
            <p id="info-bar-info">{{ request.cur_note.message|urlize|url_target_blank }}</p>
            <img src="{{ MEDIA_URL }}img/del.png" class="close" data="{{ request.cur_note.id }}" />
        </div>
        {% endif %}
        {% endblock info_bar_message %}

        <div id="header">
            <div id="header-inner">
                {% block notice_panel %}{% endblock %}
                <a href="{{ SITE_ROOT }}" id="logo" class="fleft">
                    {% if seacloud_mode %}
                    <img src="{{ MEDIA_URL }}img/seacloud_logo.png?t=1447047922" title="Seacloud" alt="logo" width="186" height="31" />
                    {% else %}
                    <img src="{{ MEDIA_URL }}{{ logo_path }}" title="Seafile" alt="logo" width="{{logo_width}}" height="{{logo_height}}" />
                    {% endif %}
                </a>
                {% block nav %}{% endblock %}

                {% block header_right %}
                {% if request.user.is_authenticated %}
                <div class="fright">
                {% if has_file_search %}
                    {% include 'snippets/search_form.html' %}
                {% endif %}

                <div data-url="{% url 'unseen_notices_count' %}" id="msg-count" class="fleft">
                    <div id="notice-icon" class="cspt" title="{% trans "Notifications" %}">
                        <img src="{{ MEDIA_URL }}img/bell.png" alt="" />
                        <span class="num hide">0</span>
                    </div>
                    <div id="notice-popup" class="hide" data-url="{% url 'get_popup_notices' %}">
                        <div class="outer-caret up-outer-caret"><div class="inner-caret"></div></div>
                        <h3 class="hd">{% trans "Notifications" %}</h3>
                        <div class="con">
                            <img src="{{MEDIA_URL}}img/loading-icon.gif" alt="" class="loading-tip" />
                            <ul class="hide" id="notice-list" data-url="{% url 'set_notice_seen_by_id' %}"></ul>
                            <p class="alc"><a href="{% url 'user_notification_list' %}" class="all">{% trans "See All Notifications" %}</a></p>
                        </div>
                        <img src="{{ MEDIA_URL }}img/del.png" class="close" data-url="{% url 'set_notices_seen' %}" />
                    </div>
                </div>

                <div id="account" class="fright">
                    <div id="my-info">
                        {% avatar request.user 36 %} <span class="icon-caret-down vam"></span>
                    </div>
                    <div id="user-info-popup" class="top-info-popup hide">
                        <div class="outer-caret up-outer-caret"><div class="inner-caret"></div></div>
                        <div class="item ovhd">
                            {% avatar request.user 36 %}
                            <div class="txt">
                                {{ request.user.username|email2nickname }} <br />
                                {{ request.user.username}}
                            </div>
                        </div>
                        <img src="{{MEDIA_URL}}img/loading-icon.gif" alt="" class="loading-tip" />
                        <div id="space-traffic" class="hide" data-url="{% url 'space_and_traffic' %}"></div>
                        <a class="item" href="{{ SITE_ROOT }}profile/">{% trans "Settings" %}</a>
                        <a href="{{ SITE_ROOT }}accounts/logout/" class="item" id="logout">{% trans "Log out" %}</a>
                    </div>
                    {% if request.user.is_staff %}
                    <div class="manage">
                        {% block sys_admin %}<a href="{% url 'sys_useradmin' %}" title="{% trans "System Admin" %}" class="a"><img src="{{ MEDIA_URL }}img/admin_in.png" alt="" /></a>{% endblock %}
                    </div>
                    {% endif %}
                    {% if request.user.org and request.user.org.is_staff %}
                    <div class="manage">
                        {% block org_admin %}<a href="{% url 'org_user_admin'%}" title="{% trans "Admin" %}" class="a"><img src="{{ MEDIA_URL }}img/admin_in.png" alt="" /></a>{% endblock %}
                    </div>
                    {% endif %}
                </div>
                </div>
                {% else %} {# for non-logged-in user #}
                <div class="fright" id="lang">
                    <a href="#" id="lang-context" data-lang="{{ LANGUAGE_CODE }}">{{ LANGUAGE_CODE|language_name_local }} <span class="icon-caret-down"></span></a>
                    <ul id="lang-context-selector" class="hide">
                        {% for LANG in LANGUAGES %}
                        <li><a href="{% url 'i18n' %}?lang={{ LANG.0 }}">{{ LANG.1 }}</a></li>
                        {% endfor %}
                    </ul>
                </div>
                {% endif %}
                {% endblock %}
            </div>
        </div>

        <div id="main" class="clear">
            <div id="title-panel" class="w100 ovhd">
                {% block title_panel %}{% endblock %}
            </div>
            <div id="left-panel">
                {% block left_panel %}{% endblock %}
            </div>
            <div id="right-panel">
                {% block right_panel %}{% endblock %}
            </div>
            <div id="main-panel" class="clear w100 ovhd">
                {% if messages %}
                <ul class="messages hide">
                    {% for message in messages %}
                    <li class="{{ message.tags }}">
                        {% if 'safe' in message.tags %}
                            {{ message|safe }}
                        {% else %}
                            {{ message }}
                        {% endif %}
                    </li>
                    {% endfor %}
                </ul>
                {% endif %}

                {% block main_panel %} {% endblock %}
            </div>
            <div id="confirm-popup" class="hide">
                <div id="confirm-con"></div>
                <button id="confirm-yes" class="btn">{% trans "Yes"%}</button>
                <button class="simplemodal-close btn">{% trans "No"%}</button>
            </div>
        </div>

        {% include 'footer.html' %}
</div><!-- wrapper -->

<script type="text/javascript" src="{{ MEDIA_URL }}js/jq.min.js?t=1447047922"></script>
<script type="text/javascript" src="{{ MEDIA_URL }}js/base.js?t=1447047922"></script>
<script type="text/javascript">
$.jstree._themes = '{{ MEDIA_URL }}js/themes/';
function ajaxErrorHandler(xhr, textStatus, errorThrown) {
    if (xhr.responseText) {
        feedback($.parseJSON(xhr.responseText).error, 'error');
    } else {
        feedback("{% trans "Failed. Please check the network." %}", 'error');
    }    
}
{% if request.user.is_authenticated %}
{% if request.cur_note %}
$('#info-bar .close').click(function() {
    $('#info-bar').addClass('hide');
    if (navigator.cookieEnabled) {
        var date = new Date(),
            cookies = document.cookie.split('; '),
            info_id_exist = false,
            new_info_id = $(this).attr('data') + '_';
        date.setTime(date.getTime() + 14*24*60*60*1000);
        new_info_id += '; expires=' + date.toGMTString() + '; path=' + '{{ SITE_ROOT }}';
        for (var i = 0, len = cookies.length; i < len; i++) {
            if (cookies[i].split('=')[0] == 'info_id') {
                info_id_exist = true;
                document.cookie = 'info_id=' + cookies[i].split('=')[1] + new_info_id;
                break;
            }
        }
        if (!info_id_exist) {
            document.cookie = 'info_id=' + new_info_id;
        }
    }
});
{% endif %}

{% if grps %}
$(function() {
    var grp_nav = $('#top-nav-grp');
    grp_nav.after('<div id="top-nav-grp-info" class="top-info-popup hide"></div>');
    var popup = $('#top-nav-grp-info');
    var popup_con = '<div class="outer-caret up-outer-caret"><div class="inner-caret"></div></div><ul id="top-nav-grp-list">';
    {% for grp in grps %}
    popup_con += '<li class="item" data-url="{{SITE_ROOT}}#group/{{ grp.id }}/" title="{{ grp.group_name }}"> {% grp_avatar grp.id 36 %} <span class="name ellipsis vam">{{ grp.group_name }}</span> <a href="{% url 'group_discuss' grp.id %}" title="{% trans "Discussion" %}" class="a vh fright"><img src="{{MEDIA_URL}}img/msgs.png" alt="" /></a> </li>';
    {% endfor %}
    popup_con += '</ul>';
    popup_con += '<a href="{% url 'group_list' %}" class="item all-grp">{% trans "All Groups" %}</a>';
    popup.html(popup_con);
    $('.item', popup).hover(
        function() {
            $(this).addClass('hl').children('.a').removeClass('vh');
        },
        function() {
            $(this).removeClass('hl').children('.a').addClass('vh');
        }
    )
    .click(function() {
        location.href = $(this).data('url');
    });

    popup.css({'right': (grp_nav.outerWidth() - popup.outerWidth())/6 * 5});

    grp_nav.parent('.nav-item').hover(
        function() {
            popup.removeClass('hide');
        },
        function() {
            popup.addClass('hide');
        }
    );
});
{% endif %}

{% if has_file_search %}
    {% include 'snippets/search_js.html' %}
{% endif %}

{% else %} {# for non-logged-in user #}
(function() {
    var lang_context = $('#lang-context'),
        lang_selector = $('#lang-context-selector');

    lang_context.parent().css({'position':'relative'});
    lang_selector.css({
        'top': lang_context.position().top + lang_context.height() + 5,
        'right': 0
        });

    lang_context.click(function() {
        lang_selector.toggleClass('hide');
        return false;
    }).focus(function() { $(this).blur(); });

    $(document).click(function(e) {
        var element = e.target || e.srcElement;
        if (element.id != 'lang-context-selector' && element.id != 'lang-context') {
            lang_selector.addClass('hide');
        }
    });
})();
{% endif %}
</script>
{% block extra_script %}{% endblock %}
{% include 'snippets/font_icon_support_for_some_browsers.html' %}
</body>
</html>
