{% extends 'common/base.html' %}

{% load racks_tag %}

{% block content %}

<form method="post" action="{% url view.url_names.actions username=user.username %}" id="bulk-form">
  <input type="hidden" id="input-action" name="action" value="" />

  <h2>Assigned Resources: {{ user|racks_tag }}</h2>

  <div>
    {% if operations_allowed %}
      <div class="pull-right btn-group">
        <button type="button" class="action-selector btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="btn-text">With selected resources...</span> <span class="caret"></span></button>
        <ul class="dropdown-menu">
          <li><a href="#" class="action-assign">Reassign to another user/group...</a></li>
          <li><a href="#" class="action-labels">Add/remove inventory labels...</a></li>
        </ul>
      </div>
    {% endif %}

    <ul class="nav nav-tabs" role="tablist">
      <li role="presentation" class="active"><a href="#objects" aria-controls="objects" role="tab" data-toggle="tab">Objects</a></li>
      <li role="presentation"><a href="#labs" aria-controls="labs" role="tab" data-toggle="tab">Labs</a></li>
    </ul>

    <div class="tab-content">

      <div role="tabpanel" class="tab-pane active" id="objects">
          {% csrf_token %}
          <table class="table table-hover table-no-head">
            <thead>
            <tr>
              {% if operations_allowed %}
              <th><input id="all-io-checkbox" type="checkbox" /></th>
              {% endif %}
              <th class="col-md-4">Name</th>
              <th class="col-md-5">Labels</th>
              <th class="col-md-3">Jira Issue</th>
            </tr>
            </thead>
            {% for object in assigned_objects %}
              <tr class="selectable-tr">
                {% if operations_allowed %}
                <td><input class="io-checkbox" id="io-checkbox-{{ object.pk }}" type="checkbox" name="io" value="{{ object.pk }}" /></td>
                {% endif %}
                <td>
                  {{ object|racks_tag }}
                </td>
                <td>
                  {% for label in object.labels.all %}
                    {{ label|racks_tag }}
                  {% endfor %}
                </td>
                <td>{% if object.dcim_jira_issue %}<a href="{{ object.dcim_jira_issue_link }}" target="_blank">{{ object.dcim_jira_issue }}</a>{% endif %}</td>
              </tr>
            {% endfor %}
          </table>
      </div>

      <div role="tabpanel" class="tab-pane" id="labs">
        <table class="table table-hover table-no-head">
          <thead>
          <tr>
            {% if operations_allowed %}
            <th><input id="all-lab-checkbox" type="checkbox" /></th>
            {% endif %}
            <th class="col-md-12">Name</th>
          </tr>
          </thead>
          {% for lab in assigned_labs %}
            <tr class="selectable-tr">
              {% if operations_allowed %}
              <td><input class="lab-checkbox" id="lab-checkbox-{{ lab.pk }}" type="checkbox" name="lab" value="{{ lab.pk }}" /></td>
              {% endif %}
              <td>{{ lab|racks_tag }}</td>
            </tr>
          {% endfor %}
        </table>
      </div>

    </div>

    {% if operations_allowed %}
      <div class="btn-group dropup">
        <button type="button" class="action-selector btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="btn-text">With selected resources... </span><span class="caret"></span></button>
        <ul class="dropdown-menu">
          <li><a href="#" class="action-assign">Reassign to another user/group...</a></li>
          <li><a href="#" class="action-labels">Add/remove inventory labels...</a></li>
        </ul>
      </div>
    {% endif %}

  </div>

</form>

{% endblock %}

{% block javascripts %}
<script type="text/javascript">
  function updateActionButtons() {
    invs = $('.io-checkbox:checked').length;
    labs = $('.lab-checkbox:checked').length;
    if (invs + labs) {
      t1 = invs ? ('' + invs + ' server' + ((invs == 1) ? '' : 's')) : '';
      t2 = (invs && labs) ? ' and ' : ''
      t3 = labs ? ('' + labs + ' lab' + ((labs == 1) ? '' : 's')) : '';
      $('.action-selector').removeClass('disabled').find('.btn-text').text(t1 + t2 + t3 + ' selected...');
    } else {
      $('.action-selector').addClass('disabled').find('.btn-text').text('Please select resources to process.');
    }
  }

  $('document').ready(function() {

    // Select checkboxes by clicking on entire row

    $('.selectable-tr').on('click', function() {
      $(this).find('input[type=checkbox]').trigger('click');
    });

    // Prevent event duplication when clicking on checkboxes directly

    $('.io-checkbox, .lab-checkbox').on('click', function(e) {
      e.stopPropagation();
      updateActionButtons();
    });

    // Form submission for "reassign" action.

    $(".action-assign").on("click", function(e) {
      e.preventDefault();
      $("#input-action").val("assign");
      $("#bulk-form").submit();
    });

    // Form submission for "manage labels" action.

    $('.action-labels').on('click', function(e) {
      e.preventDefault();
      $('#input-action').val('labels');
      $('#bulk-form').submit();
    });

    // Mass on/off checkboxes

    $('#all-io-checkbox').on('change', function(e) {
      $('.io-checkbox').prop('checked', this.checked);
      updateActionButtons();
    });

    $('#all-lab-checkbox').on('change', function(e) {
      $('.lab-checkbox').prop('checked', this.checked);
      updateActionButtons();
    });

    updateActionButtons();

  });
</script>
{% endblock %}