<!DOCTYPE html>

{% load djinn_core %}

<html lang="nl">
  <head>

    <meta charset="utf-8">

    <title>Djinn admin</title>

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link href="{{STATIC_URL}}bootstrap/dist/css/bootstrap.css"
          rel="stylesheet">
    <link rel="stylesheet" 
          href="{{STATIC_URL}}fontawesome/css/font-awesome.css" />

    <script src="{{STATIC_URL}}jquery/jquery.min.js"></script>

    <script src="{{STATIC_URL}}bootstrap/dist/js/bootstrap.js"
            defer="defer"></script>

    {% block extra_js %}
    <!-- extra JS -->
    {% endblock %}

    {% block extra_css %}
    <!-- extra CSS -->
    {% endblock %}
    
  </head>

  <body class="admin {% block toolclass %}{% endblock %}">

    {% block container %}
    <div class="container">

      <nav class="navbar navbar-inverse" role="navigation">
        <div class="container-fluid">
          <!-- Brand and toggle get grouped for better mobile display -->
          <div class="navbar-header">
            <a class="navbar-brand" href="{% url 'djinn_admin' %}">
              Djinn admin
            </a>
          </div>

          <div class="collapse navbar-collapse"
               id="bs-example-navbar-collapse-1">

            <ul class="nav navbar-nav">
              {% for tool in view.list_tools %}
              <li>
                <a href="{{ tool.url }}">{{ tool.name }}</a>
              </li>
              {% endfor %}
            </ul>

            <ul class="nav navbar-nav navbar-right">
              {% if request.user.is_authenticated %}
              <li class="dropdown">
                <a class="dropdown-toggle" 
                   data-toggle="dropdown">
                  {{ request.user }}
                  <span class="caret"></span>
                </a>
                <ul class="dropdown-menu" role="menu">
                  <li><a href="#">Logout</a></li>
                </ul>
              </li>
              {% else %}
              <li><a href="#">Login</a></li>              
              {% endif %}
            </ul>
          </div>
        </div>
      </nav>

      {% block breadcrumbs %}
      {% endblock %}

      <div class="actions well clearfix" id="actionbar">{% block actions %}{% endblock actions %}</div>

      {% block content %}

      <h1>Djinn admin</h1>

      <div class="panel panel-default">
        <div class="panel-heading">
          <h3 class="panel-title">Djinn tools</h3>
        </div>
        <div class="panel-body">

          <ul class="list-group">
            {% for tool in view.list_tools %}
            <li class="list-group-item">
              <a href="{{ tool.url }}">
                {% if tool.icon %}
                <i class="fa fa-{{tool.icon}}"></i>
                {% else %}
                <i class="fa fa-cogs"></i>
                {% endif %}
                {{ tool.name }}
              </a>

              {% if tool.description %}
              <p class="text-info">{{ tool.description }}</p>
              {% endif %}
            </li>
            {% endfor %}
          </ul>
        </div>
      </div>

      {% endblock %}

    </div>
    {% endblock container %}
    
  </body>

</html>
