{% 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>
      <!-- <div class="input-group">
        <input type="text" class="form-control" placeholder="Suche nach...">
        <span class="input-group-btn">
          <button class="btn btn-default" type="button">suchen</button>
        </span>
      </div><!-- /input-group -->
    
      {% if companies is not empty %}
      <div class="table-responsive">
        <table class="company-mgr-table custom-table-company table hyphens-auto">
          <caption class="sr-only">Unternehmen</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">Unternehmen-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>
            {% for company in companies %}
            <tr class="d-flex custom-table-row-body company-mgr-table-row" id="row-company-{{company.id}}" companyid="{{company.id}}">
              <td value="{{company.name}}" class="company-name col-3 p-2">{{company.name}} <i>({{ company.getMembersCount() }} MA)</i></td>
              <td value="{{company.boss.id}}" class="company-boss-id col-3 p-2">
                {% if company.boss == null or company.boss.id == "0" %} 
                  <i aria-hidden="true" class="fas fa-exclamation-circle highlight-color"></i>&nbsp;<i>unbesetzt</i>
                {% else %}
                  {{company.boss.name}}
                {% endif %}
              </td>
              <td value="{{company.kAdmin.id}}" class="company-kAdmin-id col-3  p-2">
                {% if company.kAdmin == null or company.kAdmin.id == "0" %}
                <i aria-hidden="true" class="fas fa-exclamation-circle highlight-color"></i>&nbsp;<i>unbesetzt</i>
                {% else %}
                  {{company.kAdmin.name}}
                {% endif %}
              </td>
              <td class="col-1 p-2">
                {% if canSeeDetails %}
                  <span title="Unternehmen-Details" aria-label="Details von {% if settings.user_grouper_name != '' %}{{ settings.user_grouper_name }}{% else %}Unternehmen{% endif %} {{ company.name }} einsehen" role="button">
                    <i aria-hidden="true" onclick="location.href = '{{ company_detail_links[company.id] }}'; event.stopPropagation();" class="pointer fas fa-chart-pie"></i>
                  </span>
                {% endif %}
              </td>
              <td id="edit-button-company-{{company.id}}" value="{{company.id}}" kadminid="{{company.kAdmin.id}}" class="pointer edit-button-company {% if (kAdminEditor and (company.kAdmin == null or company.kAdmin.id == "0")) or (bossEditor and (company.boss == null or company.boss.id == "0")) %} highlight-color {% endif %} col-1 p-2">
                <span title="{% if settings.user_grouper_name != '' %}{{ settings.user_grouper_name }}{% else %}Unternehmen{% endif %} bearbeiten" aria-label="{% if settings.user_grouper_name != '' %}{{ settings.user_grouper_name }}{% else %}Unternehmen{% endif %} {{ company.name }} bearbeiten" role="button">
                  <i aria-hidden="true" class="fas fa-edit" data-toggle="modal" data-target="#updateFirmaModal"></i>
                </span>
              </td>
              <td id="trash-button-company-{{company.id}}" value="{{company.id}}" class="pointer trash-button-company col-1 p-2">
                <span title="{% if settings.user_grouper_name != '' %}{{ settings.user_grouper_name }}{% else %}Unternehmen{% endif %} löschen" aria-label="{% if settings.user_grouper_name != '' %}{{ settings.user_grouper_name }}{% else %}Unternehmen{% endif %} {{ company.name }} löschen" role="button">
                  <i aria-hidden="true" class="fas fa-trash-alt" data-toggle="modal" data-target="#deleteCompanyModal"></i>
                </span>
              </td>
            </tr>
            {% endfor %}
          </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-2 col-md-2 col-lg-2">
<i class="fas fa-arrow-right bg-arrow"></i>
</div> -->

    <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>