{% extends "base.html" %}
{% load i18n %}

{% block header_right %}
{# removed the content on the top right corner #}
{% endblock %}

{% block extra_style %}
<style type="text/css">
.side-nav-con .first-hd {
    margin-top: 0;
}
.seafile-mask {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1001;
    display: none;
    width: 100%;
    height: 100%;
    overflow: hidden;
    outline: 0;
    background-color: #000;
}
.seafile-mask__shown {
    overflow-x: hidden;
    overflow-y: auto;
    display: block;
    opacity: 0.5;
}
</style>
{% endblock %}
{% block side-panel-menu %}
<span class="sf2-icon-menu side-nav-toggle d-block d-md-none" title="{% trans "Side Nav Menu" %}" id="js-toggle-side-nav" aria-label="{% trans "Side Nav Menu" %}"></span>
{% endblock %}
{% block main_class %}d-flex ovhd{% endblock %}

{% block main_content %}
<div class="row flex-1 w-100 d-flex">
    <div class="side-textnav col-md-3 side-nav help-side-nav h100">
        <div class="d-block d-md-none logo-container">
            <a href="{{ SITE_ROOT }}">
                <img src="{{ MEDIA_URL }}{{ logo_path }}" title="{{ site_title }}" alt="logo" width="{{logo_width}}" height="{{logo_height}}" />
            </a>
        </div>
        <div class="side-nav-con">

            <h3 class="hd first-hd">{% trans "Introduction" %}</h3>
            <ul class="side-textnav-tabs">
                <li class="tab"><a href="{{ SITE_ROOT }}help/introduction/">{% trans "Introduction" %}</a></li>
            </ul>

            <h3 class="hd">{% trans "Managing files and folders" %}</h3>
            <ul class="side-textnav-tabs">
                <li class="tab"><a href="{{ SITE_ROOT }}help/libraries_managing/">{% trans "Managing files with libraries" %}</a></li>
                <li class="tab"><a href="{{ SITE_ROOT }}help/restoring_deleted_files/">{% trans "Restoring deleted files" %}</a></li>
                <li class="tab"><a href="{{ SITE_ROOT }}help/finding_older_version_files/">{% trans "Finding old file versions" %}</a></li>
                <li class="tab"><a href="{{ SITE_ROOT }}help/library_history_and_snapshots/">{% trans "Library history and snapshots" %}</a></li>
                <li class="tab"><a href="{{ SITE_ROOT }}help/setting_library_history/">{% trans "Setting history retention period" %}</a></li>
                <li class="tab"><a href="{{ SITE_ROOT }}help/deleting_a_library/">{% trans "Deleting a library" %}</a></li>
                <li class="tab"><a href="{{ SITE_ROOT }}help/viewing_files_within_web_app/">{% trans "Viewing files within Web App" %}</a></li>
                <li class="tab"><a href="{{ SITE_ROOT }}help/full_text_file_search/">{% trans "Full text file search" %}</a></li>
            </ul>

            <h3 class="hd">{% trans "Sharing and collaboration" %}</h3>
            <ul class="side-textnav-tabs">
                <li class="tab"><a href="{{ SITE_ROOT }}help/sharing_files_and_folders/">{% trans "Sharing files and folders" %}</a></li>
                <li class="tab"><a href="{{ SITE_ROOT }}help/groups_managing/">{% trans "Managing groups" %}</a></li>
                <li class="tab"><a href="{{ SITE_ROOT }}help/file_locking/">{% trans "Locking files" %}</a></li>
                <li class="tab"><a href="{{ SITE_ROOT }}help/folder_permission/">{% trans "Folder permission" %}</a></li>
                <li class="tab"><a href="{{ SITE_ROOT }}help/departments/">{% trans "Departments sharing" %}</a></li>
            </ul>

            <h3 class="hd">{% trans "Wiki and knowledge management" %}</h3>
            <ul class="side-textnav-tabs">
                <li class="tab"><a href="{{ SITE_ROOT }}help/manage_library_as_wiki/">{% trans "Managing a library as Wiki" %}</a></li>
            </ul>
            
            <h3 class="hd">{% trans "Desktop client and syncing" %}</h3>
            <ul class="side-textnav-tabs">
                <li class="tab"><a href="{{ SITE_ROOT }}help/install_sync/">{% trans "Install and sync files" %}</a></li>
                <li class="tab"><a href="{{ SITE_ROOT }}help/syncing_existing_folders/">{% trans "Syncing existing folders" %}</a></li>
                <li class="tab"><a href="{{ SITE_ROOT }}help/selective_sync/">{% trans "Selectively sync sub-folders" %}</a></li>
                <li class="tab"><a href="{{ SITE_ROOT }}help/read-only_syncing/">{% trans "Read-only syncing" %}</a></li>
                <li class="tab"><a href="{{ SITE_ROOT }}help/unsync_resync/">{% trans "Unsync and resync libraries" %}</a></li>
                <li class="tab"><a href="{{ SITE_ROOT }}help/sync_interval/">{% trans "Setting sync interval" %}</a></li>
                <li class="tab"><a href="{{ SITE_ROOT }}help/desktop_proxy/">{% trans "Proxy settings" %}</a></li>
                <li class="tab"><a href="{{ SITE_ROOT }}help/conflicts/">{% trans "File conflicts" %}</a></li>
                <li class="tab"><a href="{{ SITE_ROOT }}help/ignore/">{% trans "Excluding files" %}</a></li>
            </ul>

            <h3 class="hd">{% trans "Drive client" %}</h3>
            <ul class="side-textnav-tabs">
                <li class="tab"><a href="{{ SITE_ROOT }}help/using_drive_client/">{% trans "Using Seafile drive client" %}</a></li>
                <li class="tab"><a href="{{ SITE_ROOT }}help/drive_client_2.0_for_windows_10/">{% trans "Using drive client 2.0 on Windows" %}</a></li>
            </ul>

            <h3 class="hd">{% trans "Security and encryption" %}</h3>
            <ul class="side-textnav-tabs">
                <li class="tab"><a href="{{ SITE_ROOT }}help/encrypted_libraries/">{% trans "How to use encrypted libraries" %}</a></li>
            </ul>
        </div>
    </div>
    <div class="help-con article col-md-9 ov-auto flex-1 h100" id="right-panel">
      {% block help_con %}{% endblock %}
    </div>
</div>
{% endblock %}

{% block extra-hidden-dom %}
<div class="seafile-mask"></div>
{% endblock %}

{% block extra_script %}
<script type="text/javascript">
$('.side-nav li').each(function(index) {
    var $link = $('a', $(this));
    var link_href = $link.attr('href');
    $link.attr('data-index', index);
    if (link_href == location.pathname ||
      link_href == location.pathname + 'introduction/') {
      $(this).addClass('tab-cur');
      if ($(this).offset().top > $(window).height()) {
        var preSavedScrollTop;
        try {
          preSavedScrollTop = localStorage.getItem('help-nav-item-' + index);
        } catch (e) {
          // do nothing
        }
        if (preSavedScrollTop) {
          $('.side-nav').scrollTop(preSavedScrollTop);
        } else {
          $('.side-nav').scrollTop($(this).offset().top + $(this).outerHeight(true) - $(window).height() + 50);
        }
      }
    }
});

$('.help-side-nav .tab a').on('click', function() {
  var scrollTop = $('.side-nav').scrollTop();
  if (scrollTop > 0) {
    try {
      localStorage.setItem('help-nav-item-' + $(this).attr('data-index'), scrollTop);
    } catch (e) {
      // do nothing
    }
  }
});

$('#logo').addClass('d-none d-md-block');

$('#js-toggle-side-nav').on('click', function(event) {
    $('.side-nav').toggleClass('side-nav-shown');
    $('.seafile-mask').toggleClass('seafile-mask__shown');
    return false;
});

$('.seafile-mask').on('click', function() {
    $('.side-nav').toggleClass('side-nav-shown');
    $('.seafile-mask').toggleClass('seafile-mask__shown');
});
</script>
{% endblock %}
