{% extends ../base.html %}

{% block title %}temBoard - settings{% end %}

{% block content %}
<!-- Instance update/add/delete modal -->
<div class="modal fade" id="InstanceModal" tabindex="-1" role="dialog" aria-labelledby="InstanceModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title" id="InstanceModalLabel"></h4>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
      </div>
      <div class="modal-body" id="InstanceModalInfo">
      </div>
      <div class="modal-body" id="InstanceModalBody">
      </div>
      <div class="modal-footer" id="InstanceModalFooter">
      </div>
    </div>
  </div>
</div>
<div class="row">
  <div class="col-md-3 col-xl-2">
    {% include menu.html %}
  </div>
  <div class="col-md-9 col-xl-10">
    <div class="row">
      <div class="col-md-12 text-right">
        <p>
          <button id="buttonLoadAddInstanceForm" class="btn btn-success btn-sm">
            New instance
          </button>
        </p>
      </div>
    </div>
    <table class="table table-striped table-bordered table-hover" id="tableInstances" cellspacing="0">
    <thead>
      <tr>
        <th>Agent</th>
        <th>Hostname</th>
        <th>PG Version</th>
        <th>PG Port</th>
        <th>PG Data</th>
        <th>Groups</th>
        <th class="no-sort"></th>
        <th class="no-sort"></th>
      </tr>
    </thead>
    <tbody>
    {% for instance_item in instance_list %}
      <tr>
        <td>{{instance_item.agent_address}}:{{instance_item.agent_port}}</td>
        <td>{{instance_item.hostname}}</td>
        <td>{{instance_item.pg_version}}</td>
        <td>{{instance_item.pg_port}}</td>
        <td>{{instance_item.pg_data}}</td>
        <td>{% for group in instance_item.groups %} <span class="badge badge-default">{{group.group_name}}</span>{% end %}</td>
        <td class="text-center">
          <button type="button" class="btn btn-outline-secondary btn-sm" data-toggle="tooltip" data-placement="bottom" title="Edit" data-action="edit" data-agent_address="{{instance_item.agent_address}}" data-agent_port="{{instance_item.agent_port}}"><i class="fa fa-edit"></i></button>
        </td>
        <td class="text-center">
          <button type="button" class="btn btn-outline-secondary btn-sm" data-toggle="tooltip" data-placement="bottom" title="Delete" data-action="delete" data-agent_address="{{instance_item.agent_address}}" data-agent_port="{{instance_item.agent_port}}"><i class="fa fa-trash-o"></i></button>
        </td>
      </tr>
    {% end %}
    </tbody>
    </table>
  </div>
</div>
<script src="/js/temboard.settings.instance.js"></script>
<script src="/js/datatables/datatables.min.js"></script>
<script src="/js/bootstrap-multiselect.js"></script>
<script>
$(document).ready(function() {
  $('#tableInstances').DataTable({
    stateSave: true
  });

  $('#buttonLoadAddInstanceForm').click(function () {
    $('#InstanceModal').modal('show');
    $('[data-toggle=popover]').popover('hide');
    load_add_instance_form('InstanceModal');
  });

  $('[data-action=edit]').click(function () {
    $('#InstanceModal').modal('show');
    $('[data-toggle=popover]').popover('hide');
    load_update_instance_form('InstanceModal', $(this).data('agent_address'), $(this).data('agent_port'));
  });

  $('[data-action=delete]').click(function () {
    $('#InstanceModal').modal('show');
    $('[data-toggle=popover]').popover('hide');
    load_delete_instance_confirm('InstanceModal', $(this).data('agent_address'), $(this).data('agent_port'));
  });
});

</script>
{% end %}