{% extends 'commands.html' %}
{% import "bootstrap/wtf.html" as wtf %}
{% import "macros.html" as macros %}

{% set sidebar_state = 'disabled' %}
{% set btn_back = true %}

{% block nav_setup %} active{% endblock %}
{% block content %}

{% set ip_list = form.ips.data.split(' ') %}
{% set ip_count = ip_list | length %}
<h2 class="mx-5 subhead-heading">
  {{ _('Changing repository of %(ip_count)d computer(s)', ip_count=ip_count) }}
</h2>

{{ macros.cmd_selected_clients(selected_clients) }}

{% if repos_set|length > 1 %}
<div class="mx-5 form-group">
  <p>Selected clients have different ogLive</p>

  <table class="table table-hover">
  <thead class="thead-light">
    <tr>
      <th>Repository</th>
      <th>Clients</th>
    </tr>
      </thead>
      <tbody class="text-left">
    {% for repo, clients in repos_set.items() %}
    <tr>
      <th>{{repo}}</th>
      <td>
      {% for ip in clients %}<div class="card d-inline-block" style="padding: 5px; margin: 3px;">{{ ip }}</div>{% endfor %}
      </td>
    </tr>
    {% endfor %}
  </tbody>
  </table>
</div>
{% endif %}

{{ wtf.quick_form(form,
                  action=url_for('action_repo_set'),
                  method='post',
                  button_map={'ok': 'primary'},
                  extra_classes="m-5") }}


<!-- jQuery -->
<script src="{{ url_for('static', filename='AdminLTE/plugins/jquery/jquery.min.js') }}"></script>
<script>
  var reposSet = {{ repos_set|tojson|safe }};
  // Update pill data
  $('.badge-pill').each(function(index) {
    for (const repo in reposSet) {
      for (const clientName of reposSet[repo]) {
          if ($(this).html().includes(clientName)) {
            $(this).html($(this).html() + '<br>' + repo);
            break;
          }
      }
    }
  });
</script>


{% endblock %}