{% extends 'base.html' %}

{% block body %}
<ul class='tabbed-menu'>
  <li data-action='switch-tab' data-tabtarget='1'>{{ 'Scheduler'|trans }}</li>
  <li data-action='switch-tab' data-tabtarget='2'>{{ 'Information'|trans }}</li>
  <li data-action='switch-tab' data-tabtarget='3'>{{ 'Templates'|trans }}</li>
  <li data-action='switch-tab' data-tabtarget='4'>{{ 'Email'|trans }}</li>
</ul>

<!-- loading spinner -->
<div class='d-flex justify-content-center' id='loading-spinner'>
  <div class='lds-dual-ring'></div>
</div>

<!-- Modal for event click -->
<div class='modal fade' id='eventModal' tabindex='-1' role='dialog' aria-labelledby='eventModalLabel' aria-hidden='true'>
  <div class='modal-dialog modal-lg' role='document'>
    <div class='modal-content'>
      <div class='modal-header'>
        <h5 class='modal-title' id='eventModalLabel'>{{ 'Edit event'|trans }}</h5>
        <button type='button' class='close' data-dismiss='modal' aria-label='Close'>
          <span aria-hidden='true'>&times;</span>
        </button>
      </div>
      <div class='modal-body' data-wait='{{ 'Please wait…' }}'>
        <h3 id='eventTitle'></h3>
        <!-- BIND EXPERIMENT -->
        <div id='eventBoundExp'></div>
        <button data-action='scheduler-rm-bind' data-type='experiment' aria-hidden='true' class='button btn btn-danger' type='button'>{{ 'Unbind'|trans }}</button>
        <div class='mt-2'>
          <i class='fas fa-link mr-1'></i><h5 class='d-inline'>{{ 'Bind an experiment'|trans }}</h5>
            <div id='binddivexp' class='input-group mb-3'>
                <div class='input-group-prepend'>
                    <span class='input-group-text'>{{ 'Search'|trans }}</span>
                </div>
                <input type='text' id='bindexpinput' class='form-control' />
                <div class='input-group-append'>
                  <button class='btn btn-primary' data-input='bindexpinput' data-action='scheduler-bind-entity' data-type='experiment' type='button'>{{ 'Attach'|trans }}</button>
                </div>
            </div>
        </div>
        <!-- BIND ITEM -->
        <div id='eventBoundDb'></div>
        <button data-action='scheduler-rm-bind' data-type='item_link' aria-hidden='true' class='button btn btn-danger' type='button'>{{ 'Unbind'|trans }}</button>
        <div class='mt-2'>
          <i class='fas fa-link mr-1'></i><h5 class='d-inline'>{{ 'Bind an item'|trans }}</h5>
            <div id='binddivdb' class='input-group mb-3'>
                <div class='input-group-prepend'>
                    <span class='input-group-text'>{{ 'Search'|trans }}</span>
                </div>
                <input type='text' id='binddbinput' class='form-control' />
                <div class='input-group-append'>
                  <button class='btn btn-primary' data-input='binddbinput'  data-action='scheduler-bind-entity' data-type='item_link' type='button'>{{ 'Attach'|trans }}</button>
                </div>
            </div>
        </div>


        <h5>{{ 'Delete this event'|trans }}</h5>
        <button type='button' id='deleteEvent' class='button btn btn-danger'>{{ 'Delete'|trans }}</button>
      </div>
      <div class='modal-footer'>
        <button type='button' class='button btn btn-secondary' data-dismiss='modal'>{{ 'Cancel'|trans }}</button>
      </div>
    </div>
  </div>
</div>


<!-- TAB 1 SCHEDULER -->
<div data-tabcontent='1' hidden>
    {% if itemsArr|length == 0 %}
        {{ 'No bookable items.'|trans|msg('warning', false) }}
    {% else %}
        <div class='row'>
          <div class='col-md-2'>
            <div class='dropdown'>
              <button class='btn btn-default dropdown-toggle' type='button' id='dropdownMenu1' data-toggle='dropdown' aria-haspopup='true' aria-expanded='true'>
                {% if allItems %}
                  {{ 'Select an equipment'|trans }}
                {% else %}
                  <span style='color:#{{ itemData.color }}'>{{ itemData.category }}</span> - {{ itemData.title }}
                {% endif %}
                <span class='caret'></span>
              </button>
              <div class='dropdown-menu' aria-labelledby='dropdownMenu1'>
                <a href='team.php?item=all' data-value='{{ 'Show all'|trans }}' class='dropdown-item'>
                  {{ 'Show all'|trans }}
                </a>
                {% for item in itemsArr %}
                  <a href='team.php?item={{ item.id }}' data-value='{{ item.title }}' class='dropdown-item'>
                    <span style='color:#{{ item.color }} '>{{ item.category }}</span> - {{ item.title }}
                  </a>
                {% endfor %}
              </div>
            </div>
          </div>
        </div>
        <br>
        <div id='scheduler'></div>
    {% endif %}
</div>

<!-- TAB 2 INFO -->
<div data-tabcontent='2' hidden>
    <div class='alert alert-success'><i class='fas fa-info-circle'></i>
    {{ 'You belong to the %s team.'|trans|format(teamArr.name) }}
    {{ 'Members'|trans }}: {{ teamsStats.totusers }} − {% trans %}Experiment{% plural teamStats.totxp %}Experiments{% endtrans %}: {{ teamsStats.totxp }} ({{ teamsStats.totxpts }} timestamped) − {{ 'Items'|trans }}: {{ teamsStats.totdb }}
    </div>

<section class='box'>
    <h5><i class='fas fa-users'></i> {{ 'Members'|trans }}</h5>
    <table id='teamtable' class='table'>
        <tr>
            <th>{{ 'Name'|trans }}</th>
            <th>{{ 'Email'|trans }}</th>
            <th>{{ 'Phone'|trans }}</th>
            <th>{{ 'Mobile'|trans }}</th>
            <th>{{ 'Website'|trans }}</th>
            <th>{{ 'Skype'|trans }}</th>
        </tr>
        <!-- archived users are hidden on this page -->
        {% for user in App.Users.readAllFromTeam()|filter(u => u.archived == 0) %}
        <tr>
          <td>
            <a href='experiments.php?owner={{ user.userid }}'>
              <span>
                {{ user.fullname|raw }}
                {% if user.usergroup in range(1, 3) %}
                  ({{ 'Admin'|trans }})
                {% endif %}
              </span>
            </a>
          </td>
          <td><a href='mailto:{{ user.email }}'>{{ user.email }}</a></td>
          <td>{{ user.phone }}</td>
          <td>{{ user.cellphone }}</td>
          <td><a href='{{ user.website }}'>{{ user.website }}</a></td>
          <td>{{ user.skype }}</td>
        </tr>
        {% endfor %}
    </table>
</section>

</div>

<!-- TAB 3 TEMPLATE -->
<div data-tabcontent='3' hidden>
  {% include 'show-templates-view.html' %}
</div>

        <!--p>{{ 'No templates from other members of the team to display!'|trans }}</p-->

<!-- TAB 4 EMAIL -->
<div data-tabcontent='4' hidden>
<section class='box'>
    <h5><i class='fas fa-envelope'></i> {{ 'Send an email to all team members'|trans }}</h5>
    <form id='emailTeamForm' method="post" action="app/controllers/TeamController.php">
        {{ App.Session.get('csrf')|csrf }}
        <input type='hidden' name='emailTeam' />
        <div class="form-group">
            <label for="emailSubject">{{ 'Subject'|trans }}</label>
            <input type='text' id='emailSubject' name='subject' class='form-control' required />
            <label for="emailBody">{{ 'Content'|trans }}</label>
            <textarea form='emailTeamForm' id='emailBody' name='body' class='form-control' rows='10' required></textarea>
        </div>
        <div class='mt-4 text-center'>
            <button type='submit' class='button btn btn-primary'>{{ 'Send'|trans }}</button>
        </div>
    </form>

</section>
</div>

<div id='info'
    data-calendarlang="{{ calendarLang }}"
    data-item="{{ selectedItem }}"
    data-all="{{ allItems }}"></div>
{% endblock body %}