{% include "company-mgr/company-mgr-firma-modal.html" with {'bosses': bosses} %}
{% include "company-mgr/company-mgr-delete-firma-confirm-modal.html" %}
{% include "company-mgr/company-mgr-delete-group-confirm-modal.html" %}
{% include "company-mgr/company-mgr-delete-user-confirm-modal.html" %}

{% include "company-mgr/company-mgr-update-firma-modal.html" with {'users': users} %}
{% include "company-mgr/company-mgr-create-group-modal.html" with {'users': users} %}
{% include "company-mgr/company-mgr-update-group-modal.html" %}
{% include "company-mgr/company-mgr-add-groupmember-modal.html" with {'users': users} %}
{% include "company-mgr/company-mgr-bosserror-modal.html" %}

<h1 class="text-center mb-5">{{heading}}</h1>

<span class="d-none" id="selected-company-id"></span>
<span class="d-none" id="selected-company-bossid"></span>
<span class="d-none" id="selected-company-name"></span>

<div class="row">
  <div class="col-sm-8 col-md-8 col-lg-8">
    <h2>1. {% if settings.user_grouper_name != '' %}{{ settings.user_grouper_name }}{% else %}Unternehmen{% endif %} auswählen</h2>    
      {% if companies is not empty %}
      <div class="form-group mt-3 mb-0">
        <label class="ml-0">Nach {% if settings.user_grouper_name != '' %}{{ settings.user_grouper_name }}{% else %}Unternehmen{% endif %}, Führungskraft oder Berater/in filtern:</label>
      </div>
      <div class="input-group">
        <div class="input-group-prepend">
          <button class="btn btn-outline-secondary company-clear-search-button" id="company-clear-search-button" type="button" data-toggle="tooltip" title="Suche zurücksetzen"><i aria-hidden="true" class="fas fa-trash-alt"></i></button>
        </div>
        <input class="form-control company-search" type="text" id="company-search" value="" placeholder="Suche..." />
      </div>
      <div class="table-responsive">
        <table class="company-mgr-table custom-table-company table hyphens-auto">
          <caption class="sr-only">{% if settings.user_grouper_name != '' %}{{ settings.user_grouper_name }}{% else %}Unternehmen{% endif %}</caption>
          <thead>
            <tr class="d-flex custom-table-row-header">
              <th class="col-3 p-2" scope="col">{% if settings.user_grouper_name != '' %}{{ settings.user_grouper_name }}{% else %}Unternehmen{% endif %}</th>
              <th class="col-3 p-2" scope="col">Führungskraft</th>
              <th class="col-3 p-2" scope="col">Berater/in</th>
              <th class="col-1 p-2" scope="col"><span class="sr-only">Details</span></th>
              <th class="col-1 p-2" scope="col"><span class="sr-only">Bearbeiten</span></th>
              <th class="col-1 p-2" scope="col"><span class="sr-only">Löschen</span></th>
            </tr>
          </thead>
          <tbody>
            {% include "company-mgr/company-mgr-companylist.html" %}
          </tbody>
        </table>
      </div>
      {% else %}
        <div class="alert alert-info" role="alert">
          <h5><i aria-hidden="true" class="fas fa-info-circle"></i>&nbsp;Hinweis</h5>
          <p>
            Es wurden noch keine {% if settings.user_grouper_name != '' %}{{ settings.user_grouper_name }}{% else %}Unternehmen{% endif %} angelegt.
          </p>
        </div>
      {% endif %}
      <button type="button" class="btn btn-primary add-company" data-toggle="modal" data-target="#firmaModal">
        {% if settings.user_grouper_name != '' %}{{ settings.user_grouper_name }}{% else %}Unternehmen{% endif %} hinzufügen
      </button>

    </div><!-- /.col-lg-6 -->
	
    <div class="col-sm-4 col-md-4 col-lg-4 d-none" id="company-grouplist">
      <h2>2. Teams zusammenstellen</h2>
      <button id="company-mgr-loading" class=" btn btn-link btn-block"><span class="userfeedback-loading"><i class="fas fa-spinner"></i></span></button>
      <div id="company-mgr-nogroups" class="d-none alert alert-info" role="alert">
        <h5><i aria-hidden="true" class="fas fa-info-circle"></i>&nbsp;Hinweis</h5>
        <p>
          Dieses Unternehmen hat noch keine Teams.
        </p> 
      </div>

    <ul id="sortable-user-groups" class="ui-sortable">
    	
    </ul>


    <!-- <button type="button" class="btn btn-primary savetraininguser"> -->
      <!-- Gruppen speichern -->
    <!-- </button> -->
    <!-- Button trigger modal training -->
    <button type="button" class="btn btn-primary creategroup-dialog" data-toggle="modal" data-target="#createGroupModal">
      Team hinzufügen
    </button>
  </div><!-- /.col-lg-5 column end -->
</div><!-- /.row -->

<style>
  .pointer {
    cursor: pointer;
  }

  .delete-group {
    font-size: 1.5em;
  }

  .edit-group {
    font-size: 1.5em;
  }

  .custom-table-row-body td:nth-child(1),
  .custom-table-row-header th:nth-child(1) {
    text-align: left; }

  .company-mgr-table td:nth-child(1),
  .company-mgr-table td:nth-child(2),
  .company-mgr-table td:nth-child(3){
    cursor: pointer;
  }

  .company-mgr-table>tbody>tr.active>td {
    background-color: #BDBDBD;
  }
</style>