{% extends 'base.html' %}

{% block body %}
<ul id='menu'>
  <li class='tabhandle' id='tab1'>{{ 'Scheduler'|trans }}</li>
  <li class='tabhandle' id='tab2'>{{ 'Information'|trans }}</li>
  <li class='tabhandle' id='tab3'>{{ 'Templates'|trans }}</li>
  <li class='tabhandle' id='tab4'>{{ 'Email'|trans }}</li>
</ul>

<!-- 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>
        <div id='eventBound'></div>
        <button id='rmBind' aria-hidden='true' class='button btn btn-danger' type='button'>{{ 'Unbind'|trans }}</button>
        <!-- BIND EXPERIMENT -->
        <div class='mt-2'>
          <h5>{{ 'Bind an experiment'|trans }}</h5>
            <div class='input-group mb-3 ui-front'>
                <div class='input-group-prepend'>
                    <span class='input-group-text'>{{ 'Search'|trans }}</span>
                </div>
                <input type='text' id='bindinput' class='form-control' />
                <div class='input-group-append'>
                  <button id='goBind' class='btn btn-primary' 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 class='divhandle' id='tab1div'>
    {% 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='{{ 'All bookable items'|trans }}' class='dropdown-item'>
                  {{ 'All bookable items'|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 class='divhandle' id='tab2div'>
    <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>{{ 'Phone'|trans }}</th>
            <th>{{ 'Mobile'|trans }}</th>
            <th>{{ 'Website'|trans }}</th>
            <th>{{ 'Skype'|trans }}</th>
        </tr>
        {% for user in App.Users.readAllFromTeam %}
        <tr>
            <td><a href='mailto:{{ user.email }}'>
                    <span
                    {# put sysadmin, admin and chiefs in bold #}
                    {% if user.usergroup in range(1, 3) %}
                        style='font-weight:bold'
                    {% endif %}
                    >{{ user.fullname|raw }}
                    </span>
                </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 class='divhandle' id='tab3div'>
  {% include('show-templates-view.html') %}
</div>

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

<!-- TAB 4 EMAIL -->
<div class='divhandle' id='tab4div'>
<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.Csrf.getHiddenInput|raw }}
        <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='submitButtonDiv'>
            <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 %}