{% load i18n waffle_tags thumbnail compress %}

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>{% block window_title %}{% trans 'Magency Studio' %}{% endblock %}</title>
    <link rel="icon" type="image/png" href="{{ theme.favicon.url }}" />
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  
    {% compress css %}
      <link rel="stylesheet" href="{{ STATIC_URL }}bootstrap/css/bootstrap.min.css">
      <link rel="stylesheet" href="{{ STATIC_URL }}font-awesome/css/font-awesome.min.css">
      <link rel="stylesheet" href="{{ STATIC_URL }}common/css/magency-icons.css">
      <link rel="stylesheet" href="{{ STATIC_URL }}common/css/animate.css">
      <link rel="stylesheet" href="{{ STATIC_URL }}css/main.css">
      <style type="text/css">
      .nav .open>a, .nav .open>a:focus, .nav .open>a:hover {
        background-color: inherit;
      }
      </style>
      {{ form.media.css }}
    {% endcompress %}

      <link rel="shortcut icon" href="{{ STATIC_URL }}img/favicon.ico" type="image/x-icon">
      <link rel="icon" href="{{ STATIC_URL }}img/favicon.ico" type="image/x-icon">

    <!-- Scripts -->
    {% compress js %}
      <script src="{{ STATIC_URL }}jquery/jquery-1.11.2.min.js"></script>
      <script src="{{ STATIC_URL }}bootstrap/js/bootstrap.min.js"></script>
      <script src="{{ STATIC_URL }}common/js/bootstrap-notify.min.js"></script>
      <script src="{{ STATIC_URL }}common/js/progressbar.min.js"></script>
    {% endcompress %}
    
    <!-- This script is outside the scope of the django-compressor -->
    <script type="text/javascript" src="{% url 'javascript-catalog' %}"></script>
    
    {% block head %}

    {% endblock %}
</head>

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

  {% block header %}
    <header style="background-image: url('{{ STATIC_URL }}common/img/magic-wand-watermark.png');">
      <div class="container">
        <a href="{% url 'cms:index' %}">
          <img class="studio-logo" src="{{ STATIC_URL }}common/img/studio-logo.png"/>
        </a>
        {% if user.is_authenticated %}
          <div class="user-menu-container">
            <div class="dropdown">
              <a class="dropdown-toggle" data-toggle="dropdown">
                {{ user.get_full_name }}
                {% if user.photo.img %}
                  <img src="{% thumbnail user.photo.img 50x50 crop quality=100 %}" />
                {% else %}
                  <img src="{{ STATIC_URL }}common/img/icon-my-person.svg" width="20" height="20"/>
                {% endif %}
              </a>
              <ul class="dropdown-menu">
                <li>
                  <a href="{{ user.get_edit_url }}">{% trans 'My profile' %}</a>
                  <a href="{% url 'logout' %}?next=/cms/">{% trans 'Logout' %}</a>
                </li>
              </ul>
            </div>
          </div>
        {% endif %}
      </div>
    </header>
  {% endblock %}

  {% block menu %}
    <nav class="main-menu {% if current_main_section == 'index' %}main-menu-index{% endif %}" style="background-image: url('{{ STATIC_URL }}common/img/magic-wand-watermark.png');">
      {% if user.is_authenticated %}
        <div class="container">
          <ul class="nav main-nav">
            <li class="nav-item nav-item-index">
              <a href="{% url 'cms:index' %}">
                <img src="{{ STATIC_URL }}common/img/icon-my-home.svg" width="20" height="20"/>
              </a>
            </li>
            <li class="nav-item nav-item-resources {% if current_main_section == 'trainings' %}nav-item-active{% endif %}">
              <a href="{% url 'trainings:training-list' %}">
                <div class="nav-item-title">
                  {% trans 'Resources' %}
                </div>
                <div class="nav-item-description">
                  {% trans 'Build and share your scenario content' %}
                </div>
              </a>
            </li>
            <li class="nav-item nav-item-sessions {% if current_main_section == 'sessions' %}nav-item-active{% endif %}">
              <a href="{% url 'trainings:session-list' %}">
                <div class="nav-item-title">
                  {% trans 'Sessions' %}
                </div>
                <div class="nav-item-description">
                  {% trans 'Visualize your sessions and export the results' %}
                </div>
              </a>
            </li>
            {% if user.is_superuser %}
            <li class="nav-item nav-item-users {% if current_main_section == 'users' %}nav-item-active{% endif %}">
              <a href="{% url 'accounts:user-list' %}">
                <div class="nav-item-title">
                  {% trans 'Users' %}
                </div>
                <div class="nav-item-description">
                  {% trans 'Manage your users profiles' %}
                </div>
              </a>
            </li>
            {% endif %}
          </ul>
        </div>
      {% endif %}
    </nav>
  {% endblock %}

    {% block page-header %}
        <section class="page-header">
            <div class="container">
                <div class="row">
                    <div class="col-xs-12">
                        <div class="row">
                            <div class="col-xs-6">

                                {% block nav-bar %}
                                {% endblock %}

                                <h2>{% block subtitle %}{% endblock %}<small>{% block subtitle-small %}{% endblock %}</small></h2>
                            </div>
                            <div class="col-xs-6">
                                <div class="pull-right">

                                    {% block actions %}
                                    {% endblock %}

                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </section>
    {% endblock %}


  <div class="container">
    <script type="text/javascript">
      $(document).ready(function(){
        {% for message in messages %}
          $.notify({
	        message: '{{ message|escapejs }}'
          },{
	        type: '{{ message.tags }}',
            placement: {
              from: "top",
              align: "center"
            }
        });
        {% endfor %}
      });
    </script>

  	{% block main %}
    {% endblock %}

    <div style="position: fixed; bottom: 10px; right: 15px; color: gray;">
        v{{ instance_version }}
    </div>

  </div>

  {% block footer %}
  {% endblock %}

  {{ form.media.js }}

  {% block extra_js %}
  {% endblock %}
</body>

</html>
