{% load static i18n  %}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta http-equiv="x-ua-compatible" content="ie=edge">

  <title>{% block title %} Papermerge {% endblock %}</title>

  <link rel="shortcut icon" type="image/png" href="{% static 'admin/img/favicon.ico' %}"/>
  <!-- Font Awesome -->
  <link rel="stylesheet" href="{% static 'admin/css/all.min.css' %}">
  <!-- icheck bootstrap -->
  <link rel="stylesheet" href="{% static 'admin/css/icheck-bootstrap.min.css' %}">
  <!-- Theme style -->
  <link rel="stylesheet" href="{% static 'admin/css/adminlte.min.css' %}">
  {% if debug %}
    <link rel="stylesheet" href="{% static 'admin/css/papermerge.debug.css' %}">
  {% else %}
    <link rel="stylesheet" href="{% static 'admin/css/papermerge.css' %}">
  {% endif  %}

  {% block extra_css %}
  {% endblock extra_css %}
</head>

<body class="{% if lte_menu == 'expanded' %} sidebar-mini {% else %} sidebar-mini sidebar-collapse  {% endif %}">
  <div class="wrapper">
    <!-- Navbar -->
    <nav class="main-header navbar navbar-expand navbar-white navbar-light {% block animated_opacity_main_header %}{% endblock %}">
        <!-- Left navbar links -->

        <ul class="navbar-nav">
          <li class="nav-item">
            <a class="nav-link" data-widget="pushmenu" href="#" data-enable-remember="false" role="button"><i class="fas fa-bars"></i></a>
          </li>
        </ul>

        <!-- SEARCH FORM -->
        <form action="{% url 'admin:search' %}" class="form-inline ml-3">
          <div class="input-group input-group-sm">
            <div class="dropdown input-group-prepend advanced-search">
              <button type="button" class="btn btn-light dropdown-toggle" id="dropdownMenuOffset" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-offset="10,20"></button>
              <div class="dropdown-menu" aria-labelledby="dropdownMenuOffset">
                <div class="p-3">
                  <div class="form-group p-1">
                    <label for="search">{% trans "Content" %}</label>
                    <input type="search" name="qa" class="form-control" placeholder="{% trans 'Search' %}">
                  </div>
                  <div class="form-group p-1">
                    <label for="id_folder">{% trans "In Folder" %}</label>
                    {{ search_form.folder }}
                  </div>
                  <div class="form-group p-1">
                    <label>{% trans "With" %}</label>
                    <select name="tags_op" class="ml-2 mr-2">
                        <option value="all" selected>{% trans "All" %}</option>
                        <option value="any">{% trans "Any" %}</option>
                    </select>
                    <label>{% trans "Tags" %}</label>
                    <div class="av-tags-container d-flex my-1">
                      <input type="text" class="form-control" list="all_tags" class="tag-input" />
                    </div>
                    <datalist id="all_tags">
                      {% for tag in alltags %}
                           <option value="{{ tag.name }}">
                      {% endfor %}
                    </datalist>
                  </div>
                  <div class="py-2">
                    <button type="submit" class="btn btn-success w-100">
                      {% trans "Advanced Search" %}
                      <i class="fas fa-search-plus ml-1"></i>
                    </button>
                  </div>
                </div>
              </div>
            </div>
            <input class="form-control form-control-navbar" type="search" name="q" placeholder="{% trans 'Search' %}" aria-label="Search">
            <div class="input-group-append">
              <button class="btn btn-navbar" type="submit">
                <i class="fas fa-search"></i>
              </button>
            </div>
          </div>
        </form>

        <!-- Right navbar links -->
        <ul class="navbar-nav ml-auto">
          <!-- User Dropdown Menu -->
          <li class="nav-item dropdown mx-3">
            <a class="dropdown-toggle" aria-expanded="false" data-toggle="dropdown" href="#">
              <i class="fa fa-user"></i>
              <div class="d-none d-sm-inline-block">
                {% firstof user.get_short_name user.get_username %}
              </div>
            </a>
            <ul id="user-menu" class="dropdown-menu">
              <li class="dropdown-item">
                {% if has_perm_change_user %}
                  <a href="{% url 'account_change_password' %}"><i class="fa fa-asterisk mx-2"></i>
                    {% trans 'Change Password' %}
                  </a>
                {% endif %}
              </li>
              {% if has_perm_view_authtoken %}
              <li class="dropdown-item">
                <a href="{% url 'admin:tokens' %}"><i class="fa fa-user-secret mx-2"></i>
                  {% trans 'API Tokens' %}
                </a>
              </li>
              {% endif %}
              <li class="dropdown-item">
                <a href="{% url 'admin:preferences' %}"><i class="fa fa-cogs mx-2"></i>
                  {% trans 'Preferences' %}
                </a>
              </li>
              {% for item in user_menu %}
                  <li class="dropdown-item">
                    <a href="{{item.url}}"><i class="{{item.icon_css_class}} mx-2"></i>
                      {{item.title}}
                    </a>
              </li>
              {% endfor %}
              <div class="dropdown-divider"></div>
              <li class="dropdown-item">
                <a target="_blank" href="https://papermerge.com/docs/"><i class="fa fa-book-open mx-2"></i>
                  {% trans 'Documentation' %}
                </a>
              </li>
              <li class="dropdown-item">
                <a id="about" href="#"><i class="fa fa-question-circle mx-2"></i>
                  {% trans 'About' %}
                </a>
              </li>
              <div class="dropdown-divider"></div>
              <li class="dropdown-item">
                <a href="{% url 'account_logout' %}"><i class="fa fa-sign-out-alt mx-2"></i>
                {% trans 'Log out' %}
                </a>
              </li>
            </ul>
          </li>
        </ul>
        {% block breadcrumb %}
          <!-- breadcrumb or document/folder path -->
        {% endblock %}
    </nav>
    <!-- /.navbar -->

    <!-- Main Sidebar Container -->
    <aside class="main-sidebar sidebar-dark-primary {% block animated_opacity_main_sidebar %}{% endblock %}">
        {% include "admin/_aside.html" %}
    </aside>

    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper {% block animated_opacity_content_wrapper %}{% endblock %}">
      <!-- Main content -->
      <div class="content">
        {% include "admin/_messages.html" %}
        <div class="row no-gutters">
          <div class="{% block main_col %} col-sm-12 col-md-9 col-lg-9 main-col {% endblock %}">
            <div class="card card-browser {% block document_browser %}{% endblock %}">
              <div class="card-body xmain">
                {% block actions %}
                  <!-- The most important action buttons here e.g. "New"
                  -->
                {% endblock %}
                {% block content %}
                {% endblock %}
              </div>
            </div>
          </div>
          {% block widgetsbar_wrapper %}
            <div class="{% block widgetsbar_col %}d-none d-md-block col-md-3 col-lg-3 widgetsbar-col pl-2 {% endblock %}">
                {% block widgetsbar %}
                {% endblock %}
            </div>
          {% endblock %}
        </div>
      </div>
      <!-- /.content -->
      
    </div>
    <!-- /.content-wrapper -->
    <div id="uploader-view"></div>
  </div>
  <!-- ./wrapper -->

  <!-- Modal Forms -->
{% block modals %}
    {% include 'admin/_forms.js.html' %}
{% endblock modals %}
  <!-- Modal Forms -->

  <!-- REQUIRED SCRIPTS -->

  <!-- jQuery -->
  <script src="{% static 'admin/js/jquery.min.js' %}"></script>
  <!-- Bootstrap 4 -->
  <script src="{% static 'admin/js/bootstrap.bundle.min.js' %}"></script>
  <!-- AdminLTE App -->
  <script src="{% static 'admin/js/adminlte.js' %}"></script>
  {% if debug %}
    <script src="{% static 'admin/js/papermerge.debug.js' %}"></script>
  {% else %}
    <script src="{% static 'admin/js/papermerge.js' %}"></script>
  {% endif %}
  
  <script src="{% url 'javascript-catalog' %}"></script>

  <script>
    /* 
      small hack which prevents advanced search dropdown to close
      if user clicks inside/dropdown
     */
    $('.advanced-search .dropdown-menu').on('click',function (e) {
      e.stopPropagation();
    });
  </script>

  {% block extra_js %}
  {% endblock extra_js %}

  <!-- see comments in PapermergeJS/src/js/routers/browse.js:browse -->
  <input type="hidden" id="root_node_id" name="root_node_id" value="{{root_node_id}}" />
</body>
</html>