{% load i18n avatar_tags %}
{% load theme_tags %}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" href="{{ STATIC_URL }}favicon.ico">
    <title>{% block title %}{{ SITE_NAME }}{% endblock %}</title>
    {% block head %}
      {% if DEBUG_STATIC %}
      <link href="{{ STATIC_URL }}lib/css/jquery.dataTables.css?v={{ VERSION }}" rel="stylesheet" />
      <link href="{{ STATIC_URL }}lib/css/select2.css?v={{ VERSION }}" rel="stylesheet"/>
      <link href="{{ STATIC_URL }}lib/css/bootstrap.min.css?v={{ VERSION }}" rel="stylesheet"/>
      <link href="{{ STATIC_URL }}lib/css/jquery-ui.css?v={{ VERSION }}" rel="stylesheet"/>
      <link href="{{ STATIC_URL }}lib/css/bootstrap-datetimepicker.css?v={{ VERSION }}" rel="stylesheet"/>
      {% else %}
      <link href="{{ STATIC_URL }}lib/css/assets.min.css?v={{ VERSION }}" rel="stylesheet"/>
      {% endif %}
      <link href="{{ STATIC_URL }}geonode/css/ext-compatibility.css?v={{ VERSION }}" rel="stylesheet" />
      <link href="{{ STATIC_URL }}geonode/css/base.css?v={{ VERSION }}" rel="stylesheet" />
      <style type="text/css">[ng\:cloak],[ng-cloak],[data-ng-cloak],[x-ng-cloak],.ng-cloak,.x-ng-cloak,.ng-hide:not(.ng-hide-animate){display:none !important;}</style>
      {% block extra_head %}
      {% endblock %}
    {% endblock %}
    <!--[if IE]>
      <script src="https://html5shim.googlecode.com/svn/trunk/html5.js"></script>
      <style>
        #ieflag{
            display: block !important;
            height: 150px;
            text-align: center;
        }
      </style>
    <![endif]-->
    <link rel="search" type="application/opensearchdescription+xml" href="/catalogue/opensearch" title="Exchange Search"/>
  </head>

  <body class="{% block body_class %}{% endblock %}">

    {% block header %}
    <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="{% url "home" %}">Exchange</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
            {% block tabs %}
            <li id="nav_layers">
              <a href="{% url "layer_browse" %}?limit=100&offset=0">{% trans "Layers" %}</a>
            </li>
            <li id="nav_maps">
              <a href="{% url "maps_browse" %}?limit=100&offset=0">{% trans "Maps" %}</a>
            </li>
            <li id="nav_documents">
              <a href="{% url "document_browse" %}?limit=100&offset=0">{% trans "Documents" %}</a>
            </li>
           {% block extra_tab %}
           {% endblock %}
            <li id="nav_people">
              <a href="{% url "profile_browse" %}?limit=100&offset=0">{% trans "People" %}</a>
            </li>
            <li id="nav_groups">
              <a href="{% url "group_list" %}?limit=100&offset=0">{% trans "Groups" %}</a>
            </li>
            {% endblock %}
          </ul>
          {% trans "Search" as search_text %}
          <form class="navbar-form" id="search" action="{% url "search" %}" >
            <div class="col-md-3">
              <div class="input-group">
                {% if HAYSTACK_SEARCH %}
                <input id="search_input" type="text" placeholder="{{ search_text }}" class="form-control" name="q">
                {% else %}
                <input id="search_input" type="text" placeholder="{{ search_text }}" class="form-control" name="title__icontains">
                {% endif %}
                <span class="input-group-btn">
                  <button class="btn btn-primary" type="submit"><i class="fa fa-search"></i></button>
                </span>
              </div>
            </div>
          </form>
          <ul class="nav navbar-nav navbar-right">
            {% if not user.is_authenticated and REGISTRATION_OPEN %}
            <li><a href="{% url "account_signup" %}">{% trans "Register" %}</a></li>
            {% endif %}
            {% if user.is_authenticated %}
            <li>
              <a href="#" data-toggle="modal" data-target="#UserModal" role="button" aria-expanded="false">
                {% avatar user 30 %} {{ user.username }}
              </a>
            </li>
            {% else %}
            <li>
              <a href="#" data-toggle="modal" data-target="#SigninModal" role="button" >
                {% trans "Sign in" %}
              </a>
            </li>
            {% endif %}
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </nav>
    {% endblock header %}

    <div class="alert alert-danger alert-dismissible" role="alert" id="ieflag" style="display:none">
      <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
      <h1>You are using an outdated browser that is not supported by Exchange.</h1>
      <p>Please use a <strong>modern browser</strong> like Mozilla Firefox, Google Chrome or Safari.</p>
    </div>

  <div id="wrap">
    {% block middle %}
    <div class="container">
      {% include "_status_message.html" %}
      {% include "_announcements.html" %}
      {% include "_messages.html" %}
      {% block body_outer %}
      <div class="row">
        <div class="col-md-8">
        {% block body %}{% endblock %}
        </div>
        <div class="col-md-4">
        {% block sidebar %}{% endblock %}
        </div>
      </div>
      {% endblock %}
    </div>
    {% endblock middle %}
  </div>

  {% block footer %}
      {% get_theme as theme %}
      <footer class="footer">
        <div class="container">
          <div class="row">
            <div class="col-md-8 small-text">
              <b>{% trans "Powered by" %}&nbsp;&nbsp;
                {% if theme.pb_link %}
                  <a href="{{ theme.pb_link }}" target="_new">
                {% else %}
                  <a href="http://boundlessgeo.com/" target="_new">
                {% endif %}
                {% if theme.pb_text %}
                  {{ theme.pb_text }}</a>
                {% else %}
                  Boundless Spatial</a>
                {% endif %}
                &nbsp;&nbsp;{% trans "version" %} {{ VERSION }}</b>&nbsp;&nbsp;|&nbsp;&nbsp;
                {% if theme.docs_link %}
                  <a href="{{ theme.docs_link }}" target="_new">
                {% else %}
                  <a href="/static/docs/index.html" target="_new">
                {% endif %}
                {% if theme.docs_text %}
                  {{ theme.docs_text }}</a>
                {% else %}
                  {% trans "Documentation" %}</a>
                {% endif %}
            </div>
          </div>
        </div> <!-- /.container -->
      </footer>
  {% endblock footer %}

    <!-- Modal must stay outside the navbar -->
    {% if not user.is_authenticated %}
    <div class="modal fade" id="SigninModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog modal-sm">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
            <h4 class="modal-title" id="myModalLabel">{% trans "Sign in" %}</h4>
          </div>
          <form class="form-signin" role="form" action="{% url "account_login" %}?next={{ request.path }}" method="post">
            <div class="modal-body">
              {% csrf_token %}
              <div class="form-group">
                <label for="id_username" class="sr-only">{% trans "Username" %}:</label>
                <input id="id_username" class="form-control" name="username" placeholder="{% trans "Username" %}" type="text" />
              </div>
              <div class="form-group">
                <label for="id_password" class="sr-only">{% trans "Password" %}:</label>
                <input id="id_password" class="form-control" name="password" placeholder="{% trans "Password" %}" type="password" />
              </div>
              <label class="checkbox">
                <input type="checkbox" /> {% trans "Remember Me" %}
              </label>
            </div>
            <div class="modal-footer">
              <button type="submit" class="btn btn-primary btn-block">{% trans "Sign in" %}</button>
            </div>
          </form>
        </div>
      </div>
    </div>
    {% else %}
    <div class="modal fade" id="UserModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog modal-sm">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title" id="myModalLabel">{% trans "Menu" %}</h4>
          </div>
          <div class="modal-body">
            <ul class="list-unstyled">
              <li><a href="{{ user.get_absolute_url }}"><i class="fa fa-user"></i> {% trans "Profile" %}</a></li>
              <li><a href="{% url "recent-activity" %}"><i class="fa fa-fire"></i> {% trans "Recent Activity" %}</a></li>
              <li><a href="{% url "messages_inbox" %}"><i class="fa fa-inbox"></i> {% trans "Inbox" %}</a></li>
              {% if USE_NOTIFICATIONS %}
                <li><a href="{% url "notification_notice_settings" %}"><i class="fa fa-bell"></i> {% trans "Notifications" %}</a></li>
              {% endif %}
              {% if perms.announcements.can_manage %}
              <li><a href="{% url "announcements_list" %}"><i class="fa fa-bullhorn"></i> {% trans "Announcements" %}</a></li>
              {% endif %}
              {% if user.is_superuser %}
              <li><a href="{% url "account_invite_user" %}"><i class="fa fa-edit"></i> {% trans "Invite User" %}</a></li>
              <li class="modal-divider"></li>
              <li><a href="{{ GEOSERVER_BASE_URL }}"><i class="fa fa-gears"></i> {% trans "GeoServer" %}</a></li>
              {% endif %}
              <li><a href="/catalogue/csw?service=CSW&version=2.0.2&request=GetCapabilities" target="_blank"><i class="fa fa-globe"></i> {% trans "Exchange CSW" %}</a></li>
              {% if user.is_staff %}
              <li><a href="{% url "admin:index" %}"><i class="fa fa-cog"></i> {% trans "Admin" %}</a></li>
              {% endif %}
              {% block extra_user_menu %}
              {% endblock %}
              <li class="modal-divider"></li>
              <li>
                  {% if theme.docs_link %}
                    <a href="{{ theme.docs_link }}" target="_new">
                  {% else %}
                    <a href="/static/docs/index.html" target="_new">
                  {% endif %}
                      <i class="fa fa-question-circle"></i>{% trans "Documentation" %}
                  </a>
              </li>
            </ul>
          </div>
          <div class="modal-footer">
            <form action="{% url "account_logout" %}" id="logout_form" method="post">
              {% csrf_token %}
              <a class="btn btn-warning btn-block" href="javascript:{}" onclick="document.getElementById('logout_form').submit();">{% trans "Log out" %}</a>
            </form>
          </div>
        </div>
      </div>
    </div>
    {% endif %}
    <!-- End of Modal -->

    {% if DEBUG_STATIC %}
    <script src="{{ STATIC_URL }}lib/js/jquery.min.js?v={{ VERSION }}"></script>
    <script src="{{ STATIC_URL }}lib/js/jquery.dataTables.js?v={{ VERSION }}"></script>
    <script src="{{ STATIC_URL }}lib/js/jquery.timeago.js?v={{ VERSION }}"></script>
    <script src="{{ STATIC_URL }}lib/js/jquery.ajaxprogress.js?v={{ VERSION }}"></script>
    <script src="{{ STATIC_URL }}lib/js/jquery.ajaxQueue.js?v={{ VERSION }}"></script>
    <script src="{{ STATIC_URL }}lib/js/jquery-ui.custom.js?v={{ VERSION }}"></script>
    <script src="{{ STATIC_URL }}lib/js/jquery.raty.js?v={{ VERSION }}"></script>
    <script src="{{ STATIC_URL }}lib/js/bootstrap.min.js?v={{ VERSION }}"></script>
    <script src="{{ STATIC_URL }}lib/js/moment-with-locales.min.js?v={{ VERSION }}"></script>
    <script src="{{ STATIC_URL }}lib/js/bootstrap-datetimepicker.min.js?v={{ VERSION }}"></script>
    <script src="{{ STATIC_URL }}lib/js/json2.js?v={{ VERSION }}"></script>
    <script src="{{ STATIC_URL }}lib/js/select2.js?v={{ VERSION }}"></script>
    <script src="{{ STATIC_URL }}lib/js/waypoints.js?v={{ VERSION }}"></script>
    {% else %}
    <script src="{{ STATIC_URL }}lib/js/assets.min.js?v={{ VERSION }}"></script>
    {% endif %}
    <script src="{{ STATIC_URL }}geonode/js/utils/utils.js?v={{ VERSION }}"></script>
    <script src="{{ STATIC_URL }}geonode/js/base/base.js?v={{ VERSION }}"></script>
    {% include 'autocomplete_light/static.html' %}
    <script type="text/javascript" src="{% url 'django.views.i18n.javascript_catalog' %}"></script>
    {% block extra_script %}{% endblock extra_script %}
    <script type="text/javascript">
        var autocomplete = $('#search_input').yourlabsAutocomplete({
            url: '{% url "autocomplete_light_autocomplete" "ResourceBaseAutocomplete" %}',
            choiceSelector: 'span',
            hideAfter: 200,
            minimumCharacters: 1,
            placeholder: '{% trans 'Type your search here ...' %}',
            appendAutocomplete: $('#search_input'),
            autoHilightFirst: false
        });
        $('#search_input').bind('selectChoice', function(e, choice, autocomplete) {
            if(choice[0].children[0] == undefined) {
                $('#search_input').val($(choice[0]).text());
                $('#search').submit();
            }
        });
    </script>
    <script>
        // Workaround to fix the autocomplete box positions
        yourlabs.Autocomplete.prototype.fixPosition = function(html) {
            this.input.parents().filter(function() {
                return $(this).css('overflow') === 'hidden';
            }).first().css('overflow', 'visible');
            if(this.input.attr('name') !== 'resource-keywords'){
              this.box.insertAfter(this.input).css({top: 0, left: 0});
            }else{
              var pos = $.extend({}, this.input.position(), {
                height: this.input.outerHeight()
              });
              this.box.insertAfter(this.input).css({top: pos.top + pos.height, left: pos.left});
            }
        };
    </script>
    <script type="text/javascript" src="{% url "lang" %}"></script>

  </body>
</html>
