{% extends ../base.html %}

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

{% block head %}
{% for link in vitejs.css_links_for('settings.instance.js') %}{% raw link %}{% end %}
<!-- Multiselect -->
<link href="/css/bootstrap-multiselect.css" rel="stylesheet">
{% end %}

{% block content %}
<div id="vue-app">
  <environment-migration-dialog ref="environment_migration_dialog" object-class="instance" title="Instance in multiple groups"></environment-migration-dialog>
  <new-instance-wizard ref="new_instance_wizard"></new-instance-wizard>
  <update-instance-dialog ref="update_modal"></update-instance-dialog>
  <delete-instance-dialog ref="delete_modal"></delete-instance-dialog>

  <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="buttonNewInstance" class="btn btn-success btn-sm" data-toggle="modal" data-target="#modalNewInstance">
              New instance
            </button>
        </p>
        </div>
      </div>
      <table class="table table-striped table-bordered table-hover" id="tableInstances" cellspacing="0">
      <thead>
        <tr>
          <th>Server</th>
          <th>PG Version</th>
          <th>PG Data</th>
          <th>Groups</th>
          <th>Agent</th>
          <th>Notify</th>
          <th>Comment</th>
          <th class="no-sort"></th>
          <th class="no-sort"></th>
        </tr>
      </thead>
      <tbody>
      {% for instance in instance_list %}
        <tr>
          <td>
            <a href="/server/{{instance.agent_address}}/{{instance.agent_port}}/dashboard">
              <i class="fa fa-database"></i>
              {{instance.hostname}}:{{instance.pg_port}}
            </a>
          </td>
          <td>
            {{instance.pg_version_summary}}
            <div class="overflow-ellipsis small text-muted" style="max-width: 150px;" title="{{instance.pg_version}}">
              {{instance.pg_version}}
            </div>
          </td>
          <td>{{instance.pg_data}}</td>
          <td>
            {% for group in instance.groups %} <span class="badge border text-muted">{{group.group_name}}</span>{% end %}
            {% if len(instance.groups) > 1 %}
              <i
                class="fa fa-warning text-warning"
                style="cursor: pointer;"
                title="Instance in multiple groups. Click for details."
                data-toggle="modal"
                v-on:click="$refs.environment_migration_dialog.show()">
              </i>
            {% end %}
          </td>
          <td class="agent_hostport">
            {{instance.agent_address}}:{{instance.agent_port}}
            {% if instance.agent_key %}
            <i class="fa fa-warning text-warning" title="This temBoard agent is running an old version. Consider upgrading."/>
            {% end %}
          </td>
          <td class="text-center">
            {% if instance.notify %}
            <i class="fa fa-check"></i>
            {% end %}
          </td>
          <td>
            {% set comment = instance.comment if instance.comment is not None else '' %}
            <div class="overflow-ellipsis" style="max-width: 100px;" title="{{comment}}">
              {{comment}}
            </div>
          </td>
          <td class="text-center">
            <button type="button"
              class="btn btn-outline-secondary btn-sm buttonEdit"
              data-toggle="tooltip"
              data-placement="bottom"
              title="Edit"
              v-on:click.prevent="$refs.update_modal.open('{{instance.agent_address}}', {{instance.agent_port}})"
            ><i class="fa fa-edit"></i></button>
          </td>
          <td class="text-center">
            <button
              type="button"
              class="btn btn-outline-secondary btn-sm buttonDelete"
              data-toggle="tooltip"
              data-placement="bottom"
              title="Delete"
              v-on:click.prevent="$refs.delete_modal.open('{{ instance.agent_address }}', {{ instance.agent_port }})"
            ><i class="fa fa-trash-o"></i></button>
          </td>
        </tr>
      {% end %}
      </tbody>
      </table>
    </div>
  </div>
</div>

<script src="/js/bootstrap-multiselect.js"></script>
<script type="module" src="{{ vitejs.url_for('settings.instance.js') }}"></script>
{% end %}
