{% load i18n %}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>{{ site_config.title }}{% block title %}{% endblock %}</title>
  <link rel="stylesheet" href="/static/bootstrap-335/css/bootstrap.min.css" type="text/css">
  <link rel="stylesheet" href="/static/css/lib/font-awesome-3.1.1.css" type="text/css" />
  <link rel="stylesheet" href="/static/css/layout-0.5.2.css" type="text/css" />
  <link rel="shortcut icon" href="/static/favicon.ico" type="image/ico" />
  <meta name="robots" content="index, follow">
  {% block rss_url %}{% endblock %}
  <style type="text/css">
    <!--
    #navi a {
      color: {{ site_config.navi_link_color }};
    }
    @media (max-width: 767px) {
      #content .modal.fade.in {
        top: 5%;
      }
    }
    
    #text-layer > div {
      color: transparent;
      position: absolute;
    }
    
    .highlight {
      background-color:rgba(200, 255, 0, 0.2);
    }

    {{ site_config.custom_css|safe }}
    
    -->
  </style>
  <script src="/static/js/lib/jquery-1.11.3.min.js" type="text/javascript"></script>
  <script src="/static/bootstrap-335/js/bootstrap.min.js" type="text/javascript"></script>
  <script src="/static/js/lib/bootstrap3-typeahead-3.1.1.min.js" type="text/javascript"></script>
  <script src="/static/js/lib/bootstrap-hover-dropdown.min.js" type="text/javascript"></script>
  <script src="/static/js/lib/d3.v3.min.js" type="text/javascript"></script>
  <script src="/static/js/lib/d3.layout.cloud.js" type="text/javascript"></script>
  <script src="/static/js/custom-0.5.0.js" type="text/javascript"></script>
  <script src="/static/js/pdf_viewer-0.5.0.js" type="text/javascript"></script>
  <script src="/static/js/tag_cloud-0.5.2.js" type="text/javascript"></script>
  <script>
    var csrf_token = '{{ csrf_token }}';
    // For having translation in js files
    var tag_cloud_not_available_msg = "{% trans 'No tag cloud available.' %}";
    var tag_cloud_error_msg = "{% trans 'Error while loading the tag cloud.' %}";
  </script>
</head>
<body>

<div class="container">

  <div class="navbar navbar-default" style="margin-bottom: 0px;">
    <div class="container">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-navbar-collapse-1" aria-expanded="false">
        <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="/" style="color:{{ site_config.title_color }};font-weight:bold;">{{ site_config.title }}  </a>
      <div class="collapse navbar-collapse" id="bs-navbar-collapse-1">
        <ul class="nav navbar-nav">
          <li><a href="/" style="{% if site_category.category == 'home' %}font-weight:bold;{% endif %}"><i class="icon-home"></i> Home</a></li>
          <li><a href="/{% trans "project_parts_url" %}" style="{% if site_category.category == 'project_parts' %}font-weight:bold;{% endif %}"><i class="icon-cogs"></i> {% trans "Topics" %}</a></li>
          {% if site_config.show_goals_category %}
            <li><a href="/{% trans "goals_url" %}" style="{% if site_category.category == 'goals' %}font-weight:bold;{% endif %}"><i class="icon-bullseye"></i> {% trans "Goals" %}</a></li>
          {% endif %}
          {% if site_config.show_questions_category %}
            <li><a href="/{% trans "questions_url" %}" style="{% if site_category.category == 'questions' %}font-weight:bold;{% endif %}"><i class="icon-question-sign"></i> {% trans "Questions" %}</a></li>
          {% endif %}
          <li><a href="/{% trans "participants_url" %}" style="{% if site_category.category == 'participants' %}font-weight:bold;{% endif %}"><i class="icon-group"></i> {% trans "Participants" %}</a></li>
          <li><a href="/{% trans "events_url" %}" style="{% if site_category.category == 'events' %}font-weight:bold;{% endif %}"><i class="icon-time"></i> {% trans "Events" %}</a></li>
          <li><a href="/{% trans "documents_url" %}" style="{% if site_category.category == 'documents' %}font-weight:bold;{% endif %}"><i class="icon-inbox"></i> {% trans "Documents" %}</a></li>

        </ul>
      </div>
    </div>
    <div class="container" style="text-align: center;margin-top:7px;margin-bottom:7px;">
      <div class="row">
        <div class="col-sm-10 col-sm-offset-1 col-md-6 col-md-offset-3">
          <div class="input-group">
            <input type="text" class="form-control" id="q" name="q" data-provide="typeahead" value="{{ request.GET.q }}" placeholder="{% trans "Search" %}" autocomplete="off">
            <span class="input-group-addon"><i class="icon-search"></i></span>
          </div>
        </div>
      </div>
    </div>

  </div>

<div class="row" id="content">

{% block content %}
{% endblock %}

</div>
<div class="row">
  <div class="col-md-12" id="footer">
    <div class="row">
      <div class="col-md-6">{{ site_config.footer|safe }}</div>
      <div class="col-md-6" style="text-align: right;">
{% if site_config.public_api %}
  <a href="/api/">API</a> | 
{% endif %}
        <a href="http://django-public-project.org" target="_blank" title="Django Public Project Software">Django Public Project</a> | 
        <a href="https://github.com/holgerd77/django-public-project" title="Django Public Project Source Code" target="_blank">Source Code</a> | 
        <i class="icon-pushpin"></i> <a href="/{% trans "contact_url" %}">{% trans "Contact" %}</a>
      </div>    
    </div>
  </div>
  
</div>

</div>

{% if research_request %}
<div class="modal fade" id="research_request">
  <div class="modal-dialog">
  <div class="modal-content">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
    <h3>{% trans "Research Request" %}</h3>
  </div>
  <div class="modal-body">
    {% with research_request as research_request_list %}
    {% include 'info_box/research_requests.html' %}
    {% endwith %}
  </div>
  <div class="modal-footer">
    <a href="#" class="btn btn-default" id="rr_close_btn">{% trans "Close" %}</a>
  </div>
  </div>
  </div>
</div>

<script>
  $(document).ready(function() {
     $('#research_request').modal();
     
     $('#rr_close_btn').click(function() {
        $('#research_request').modal('hide');
     });
  });
  
</script>

{% endif %}


{% if user_comment %}
<div class="modal fade" id="user_comment">
  <div class="modal-dialog">
  <div class="modal-content">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
    <h3>{% trans "Comment" %}</h3>
  </div>
  <div class="modal-body">
    {% with user_comment as comment_list %}
    {% include 'info_box/comments.html' %}
    {% endwith %}
  </div>
  <div class="modal-footer">
    <a href="#" class="btn btn-default" id="uc_close_btn">{% trans "Close" %}</a>
  </div>
  </div>
  </div>
</div>

<script>
  $(document).ready(function() {
     $('#user_comment').modal();
     
     $('#uc_close_btn').click(function() {
        $('#user_comment').modal('hide');
     });
  });
</script>

{% endif %}


<script>
  if (!more_cos_input_values) {
    var more_cos_input_values = null;
    var num_more_cos = 0;
    var counter_more_cos = 0; //For ids, can be higher than num_more_cos if cos are deleted in between
  }
  

  $("#q").typeahead({
    minLength: 1,
    items: 10,
    source: function(query, process) {
          return $.ajax({
             url: '/xhr/universal_search/',
             type: 'get',
             data: {
                query: query,
                with_query_search: "yes",
             },
             dataType: 'json',
             success: function(json) {
                co_input_values = json.values
                return typeof json.options == 'undefined' ? false : process(json.options);
             }
          });
    },
    highlighter: function(item) {
      return item;
    },
    updater: function (item) {
      location.href = co_input_values[item].absolute_url;
    }
  });
  
</script> 

<script>
  $(document).ready(function() {
     $('.html_text_with_imgs img').each(function() {
        var title = '"' + $(this).attr("alt") + '"' + ", {% trans 'image attribution under' %} {% trans 'Contact' %}"; 
        $(this).attr("title", title);
     }); 
  });
  
  {{ site_config.custom_js|safe }}
  
</script>


</body>
</html>
