{% load static i18n thumbnail %}<!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.0">
    <title>{% block title %}Bootcamp{% endblock title %}</title>
    <link rel="icon" type="image/png" href="{% static 'img/favicon.png' %}">
    <meta name="description" content="An enterprise Social Network">
    <meta name="author" content="Sebastian Reyes">
    <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
    <![endif]-->
    {% block css %}
    <!-- Latest compiled and minified Bootstrap 4 beta CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <!-- Your stuff: Third-party CSS libraries go here -->
    <link rel="stylesheet" type="text/css" href="{% static 'fonts/font-awesome-4.7.0/css/font-awesome.min.css' %}">
    <!-- This file stores project-specific CSS -->
    <link href="{% static 'css/bootcamp.css' %}?v=1" rel="stylesheet">
    {% endblock css %}
    {% block head %}{% endblock head %}
  </head>
  <body>
    {% block body %}
      <div class="m-b-1">
        {% if request.user.is_authenticated %}
          <nav class="navbar fixed-top navbar-expand-md navbar-dark bg-dark">
            <div class="container">
              <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
              </button>
              <a class="navbar-brand" href="#">Bootcamp</a>
              <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav">
                  <li class="nav-item">
                    <a class="btn btn-md" href="#" id="notifications" data-toggle="popover" data-title="{% trans 'Notifications' %}">
                        <i class="fa fa-bell-o" aria-hidden="true"></i>
                    </a>
                  </li>
                </ul>
                <ul class="navbar-nav mr-auto">
                  <li class="nav-item"><a class="nav-link" href="{% url 'news:list' %}">{% trans 'News' %} <span class="sr-only">(current)</span></a></li>
                  <li class="nav-item"><a class="nav-link" href="{% url 'articles:list' %}">Blog</a></li>
                  <li class="nav-item"><a class="nav-link" href="{% url 'qa:index_noans' %}">{% trans 'Q&A' %}</a></li>
                  <li class="nav-item"><a class="nav-link" href="{% url 'messager:messages_list' %}">{% trans 'Inbox' %}</a></li>
                  <li class="nav-item"><a class="nav-link" href="{% url 'users:list' %}">{% trans 'Contacts' %}</a></li>
                </ul>
                <ul class="nav navbar-nav navbar-right">
                  {% if not hide_search %}
                    <form class="form-inline navbar-left" role="search" action="{% url 'search:results' %}">
                      <div class="input-group">
                        <input name="query" type="search" id="searchInput" class="form-control" placeholder="{% trans 'Search' %}" aria-label="Search">
                        <div class="input-group-append">
                          <span class="input-group-text"><i class="fa fa-search" aria-hidden="true"></i></span>
                        </div>
                      </div>
                    </form>
                  {% endif %}

                  <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                      {% thumbnail request.user.picture "x30" as im %}
                        <img src="{{ im.url }}" style="border-radius: 50%;" alt="{% trans 'User Image' %}" class="user-image">
                      {% empty %}
                        <img src="{% static 'img/user.png' %}" height="30px" alt="{% trans 'No Profile Picture' %}" />
                      {% endthumbnail %}
                      {{ request.user.username }}
                    </a>
                    <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                      <a class="dropdown-item" href="{% url 'users:detail' request.user.username  %}"><i class="fa fa-cogs fa-fw" aria-hidden="true"></i>&nbsp; {% trans 'Profile Settings' %}</a>
                      <div class="dropdown-divider"></div>
                      <a class="dropdown-item" href="{% url 'account_logout' %}"><i class="fa fa-sign-out fa-fw" aria-hidden="true"></i>&nbsp; {% trans "Log Out" %}</a>
                    </div>
                  </li>
                </ul>
              </div>
            </div>
          </nav>
        {% endif %}
      </div>
      <div id="header" class="container">
        {% if messages %}
          {% for message in messages %}
            <div id="messages" class="alert {% if message.tags %}alert-{{ message.tags }}{% endif %}">
              <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
              {{ message }}
            </div>
          {% endfor %}
        {% endif %}

        {% block content %}
          <p>Use this document as a way to quick start any new project.</p>
        {% endblock content %}

      </div>
      <!-- /container -->

      <!-- Le javascript
      ================================================== -->
      <!-- Placed at the end of the document so the pages load faster -->
      {% block javascript %}
        <!-- Required by Bootstrap v4 -->
        <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
        <!-- Your stuff: Third-party javascript libraries go here -->
        <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js" type="text/javascript"></script>
        <!-- place project specific Javascript in this file -->
        <script src="{% static 'js/bootcamp.js' %}" type="text/javascript"></script>
        <script src="{% static 'js/websocketbridge.js' %}" type="text/javascript"></script>
        <script type="text/javascript">
          var currentUser = "{{ request.user.username }}"
          $(function() {
                  source: "{% url 'search:suggestions' %}",
                  minLength: 2
              });
          });
        </script>
      {% endblock javascript %}

      {% block modal %}{% endblock modal %}

    {% endblock body %}
  </body>

  <!-- /.container -->
</html>
