{% load i18n avatar_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"> 
    <title>{% block title %}{{ SITE_NAME }}{% endblock %}</title>
    {% block head %}
      {% if DEBUG_STATIC %}
      <link href="{{ STATIC_URL }}lib/css/jquery.dataTables.css" rel="stylesheet" />
      <link href="{{ STATIC_URL }}lib/css/select2.css" rel="stylesheet"/>
      <link href="{{ STATIC_URL }}lib/css/bootstrap.min.css" rel="stylesheet"/>
      <link href="{{ STATIC_URL }}lib/css/jquery-ui.css" rel="stylesheet"/>
      <link href="{{ STATIC_URL }}lib/css/bootstrap-datetimepicker.css" rel="stylesheet"/>
      {% else %}
      <link href="{{ STATIC_URL }}lib/css/assets.min.css" rel="stylesheet"/>
      {% endif %}
      <link href="{{ STATIC_URL }}geonode/css/ext-compatibility.css" rel="stylesheet" />
      <link href="{{ STATIC_URL }}geonode/css/base.css" 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]-->
  </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" %}">GeoNode</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" %}">{% trans "Layers" %}</a>
            </li>
            <li id="nav_maps">
              <a href="{% url "maps_browse" %}">{% trans "Maps" %}</a>
            </li>
            <li id="nav_documents">
              <a href="{% url "document_browse" %}">{% trans "Documents" %}</a>
            </li>
           {% block extra_tab %}
           {% endblock %}
            <li id="nav_people">
              <a href="{% url "profile_browse" %}">{% trans "People" %}</a>
            </li>
            <li id="nav_groups">
              <a href="{% url "group_list" %}">{% trans "Groups" %}</a>
            </li>
            {% endblock %}
          </ul>
          <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" class="form-control" name="q">
                {% else %}
                <input id="search_input" type="text" placeholder="Search" 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 GeoNode.</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 %}
        <div id="description">
              <h3>{% trans "There was a problem loading this page" %}</h3>
            </div>
            {% blocktrans %}
            Please contact your GeoNode administrator (he may have received an email automatically if he configured it properly).
            If you are the site administrator, enable debug mode to see the actual error and fix it or file an issue in <a href="http://github.com/GeoNode/geonode/issues">GeoNode's issue tracker</a>
            {% endblocktrans %}
        {% endblock %}
        </div>
        <div class="col-md-4">
        {% block sidebar %}{% endblock %}
        </div>
      </div>
      {% endblock %}
    </div>
    {% endblock middle %}
  </div>
    
    {% block footer %}
    <footer class="footer">
      <div class="container">
        <div class="row">
          <div class="col-md-8">
            {% trans "Powered by" %} <a href="http://geonode.org">{% trans "GeoNode" %}</a> <em>{% trans "version" %} {{ VERSION }}</em> |
            <a href="{% url "developer" %}">{% trans "Developers" %}</a> |
            <a href="{% url "about" %}">{% trans "About" %}</a>
          </div>
          <div class="col-md-4">
            <label class="hidden">{% trans "Language" %}</label>
            {% if csrf_token != "NOTPROVIDED" %}
            {% get_current_language as LANGUAGE %}
            <form class="form-inline" action="/i18n/setlang/" method="post">
            {% csrf_token %}
              <select class="col-md-6 pull-right" name="language" onchange="javascript:form.submit()">
                {% for lang in LANGUAGES %}
                <option value="{{ lang.0 }}" {% ifequal LANGUAGE_CODE lang.0 %} selected="selected"{% endifequal %}>
                  {{ lang.1 }}
                </option>
                {% endfor %}
              </select>
            </form>
            {% endif %}
          </div>
        </div>
      </div>
    </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">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="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="{% url "layer_upload" %}"><i class="fa fa-cloud-upload"></i> {% trans "Upload Layers" %}</a></li>
              <li class="modal-divider"></li>
              <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 "services" %}"><i class="fa fa-globe"></i> {% trans "Remote Services" %}</a></li>
              <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 %}
              {% 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><a title="Help" rel="tooltip" href="/help/"><i class="fa fa-question-circle"></i> {% trans "Help" %}</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"></script>
    <script src="{{ STATIC_URL }}lib/js/jquery.dataTables.js"></script>
    <script src="{{ STATIC_URL }}lib/js/jquery.timeago.js"></script>
    <script src="{{ STATIC_URL }}lib/js/jquery.ajaxprogress.js"></script>
    <script src="{{ STATIC_URL }}lib/js/jquery.ajaxQueue.js"></script>
    <script src="{{ STATIC_URL }}lib/js/jquery-ui.custom.js"></script>
    <script src="{{ STATIC_URL }}lib/js/jquery.raty.js"></script>
    <script src="{{ STATIC_URL }}lib/js/bootstrap.min.js"></script>
    <script src="{{ STATIC_URL }}lib/js/json2.js"></script>
    <script src="{{ STATIC_URL }}lib/js/select2.js"></script>
    <script src="{{ STATIC_URL }}lib/js/waypoints.js"></script>
    {% else %}
    <script src="{{ STATIC_URL }}lib/js/assets.min.js"></script>
    {% endif %}
    <script src="{{ STATIC_URL }}geonode/js/utils/utils.js"></script>
    <script src="{{ STATIC_URL }}geonode/js/base/base.js"></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')
        });
        $('#search_input').bind('selectChoice', function(e, choice, autocomplete) {
            if(choice[0].children[0] == undefined) {
                $('#search_input').val(choice[0].innerHTML);
                $('#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>
