{% extends "main.html" %}

{% block content %}
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="/"><i class="material-icons mr-1">{{app.attributes['icon']}}</i>{{app.name}}</a>
  <ul class="nav nav-tabs mr-auto">
    {% for view in views %}
      {% if active_view_name and (view.name | lower) == active_view_name %}
      <li class="nav-item active">
        <a class="nav-link active d-inline" href="?view={{view['name'] | lower}}">{{view.name}}</a>
        <div class="dropdown d-inline">
          <button type="button" class="btn btn-light" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            <i class="material-icons mr-1">more_vert</i>
          </button>
          <div class="dropdown-menu">
            {% if endpoint == 'types' %}
              <button data-toggle="modal" data-target="#form_TypeViewEditForm" class="dropdown-item" type="button"><i class="material-icons mr-1">edit</i>Edit</button>
              <button data-toggle="modal" data-target="#form_TypeViewQueryForm" class="dropdown-item" type="button"><i class="material-icons mr-1">search</i>Query</button>
              <button data-toggle="modal" data-target="#form_TypeViewDeleteForm" class="dropdown-item" type="button"><i class="material-icons mr-1">delete</i>Delete</button>
            {% else %}
              <button data-toggle="modal" data-target="#form_ViewEditForm" class="dropdown-item" type="button"><i class="material-icons mr-1">edit</i>Edit</button>
              <button data-toggle="modal" data-target="#form_ViewQueryForm" class="dropdown-item" type="button"><i class="material-icons mr-1">search</i>Query</button>
              <button data-toggle="modal" data-target="#form_ViewDeleteForm" class="dropdown-item" type="button"><i class="material-icons mr-1">delete</i>Delete</button>
            {% endif %}
          </div>
        </div>
      </li>
      {% else %}
      <li class="nav-item">
        <a class="nav-link" href="?view={{view['name'] | lower}}">{{view.name}}</a>
      </li>
      {% endif %}
    {% endfor %}
  </ul>
  <ul class="nav navbar-right mr-auto">
    <li class="nav-item  mr-auto">
        <div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
            <div class="btn-group mr-2" role="group" aria-label="First group">
                <form class="form-inline" role="form">
                    <input class="form-control" type="search" placeholder="Keywords" aria-label="keywords" id="search">
                    <button type="submit" class="btn btn-success ml-2 mr-2">Search</button>
                </form>
            </div>
            {% if items %}
            <div class="btn-group mr-2" role="group" aria-label="Second group">
              <button class="btn btn-outline-secondary ml-2 mr-2" disabled>{{items|length}} {{types|join(',')}}(s)</button>
            </div>
            {% endif %}
            <div class="btn-group mr-2" role="group" aria-label="Second group">
              <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                <i class="material-icons mr-1">more_vert</i>
              </button>
              <div class="dropdown-menu dropdown-menu-right">
                {% if menu %}
                  {% for menu_item in menu %}
                  {% if endpoint == 'types' %}
                    <button data-toggle="modal" data-target="#form_{{menu_item['attributes']['form']}}" data-path="types" class="dropdown-item menu-item-button" type="button"><i class="material-icons mr-1">{{menu_item['attributes']['icon']}}</i>{{menu_item['name']}}</button>
                  {% else %}
                    <button data-toggle="modal" data-target="#form_{{menu_item['attributes']['form']}}" data-path="{{menu_item['attributes']['path']}}" class="dropdown-item menu-item-button" type="button"><i class="material-icons mr-1">{{menu_item['attributes']['icon']}}</i>{{menu_item['name']}}</button>
                  {% endif %}
                  {% endfor %}
                  <script>
                    $(document).ready(function(){
                      $('.menu-item-button').on('click', function(event) {
                        const path = $(this).attr('data-path');
                        console.log('****', path);
                        if (path) {
                          $($(this).attr('data-target')).find('form').attr('action', '/' + path);
                        }  
                      });
                    });
                  </script>
                {% endif %}
              </div>
            </div>
        </div>
    </li>
  </ul>
  
</nav>
  {% for view in views %}
    {% if active_view_name and (view['name'] | lower) == active_view_name %}
      {% with item=item, items=items %}
          {% include "view.html" %}
      {% endwith %}
    {% endif %}
  {% endfor %}
{% endblock %}
    