{% extends "base.html" %}

{% block title %}{{ super() }} / Settings / Instances{% endblock %}

{% block head %}
{% for link in vitejs.css_links_for('settings.instances.js') %}{{ link|safe }}{% endfor %}
{% endblock %}

{% block sidebar %}
{% include "settings/menu.html" %}
{% endblock %}

{% block content %}
<div id="vue-app" class="row" v-cloak>
  <new-instance-wizard ref="new_instance_wizard"></new-instance-wizard>
  <update-instance-dialog ref="update_modal"></update-instance-dialog>
  <DeleteDialog ref="delete_modal" id="modalDeleteInstance" title="Delete instance" v-slot="{resource}">
    <p class="text-center fs-5">Please confirm the deletion of instance:</p>
    <InstanceDetails :pg_host="resource.hostname" :pg_port="resource.pg_port"/>
  </DeleteDialog>

  <div class="col-12">
    <table class="table table-striped table-bordered table-hover" id="tableInstances" cellspacing="0">
      <thead>
        <tr>
          <th>Server</th>
          <th>PostgreSQL</th>
          <th>Agent</th>
          <th>Notify</th>
          <th><!-- actions --></th>
        </tr>
      </thead>
      <tbody>
        {% for instance in instance_list %}
        <tr>
          <td>
            <div>
              <a href="/server/{{instance.agent_address}}/{{instance.agent_port}}/dashboard">
                <i class="fa fa-database"></i>
                {{instance.hostname}}:{{instance.pg_port}}
              </a>
              <span class="badge border text-body-secondary align-middle">{{instance.environment.name}}</span>
            </div>
            {% set comment = instance.comment|default('') %}
            <div class="overflow-ellipsis small text-body-secondary" style="max-width: 150px;" title="{{comment}}">
              {{-comment-}}
            </div>
          </td>
          <td>
            <span title="{{instance.pg_version}}">
            {{instance.pg_version_summary or 'Unknown'}}
            </span>
            <div class="overflow-ellipsis small text-body-secondary" style="max-width: 150px;" title="Data directory">
              {{instance.pg_data or 'Unknown'}}
            </div>
          </td>
          <td class="agent">
            <span class="hostport">{{instance.agent_address}}:{{instance.agent_port}}</span>
            <div class="overflow-ellipsis small text-body-secondary" style="max-width: 150px;" title="Agent version">
              {% set discover = instance.discover or {} %}
              temBoard Agent {{discover.get('temboard', {}).get('agent_version', 'unknown')}}
            </div>
          </td>
          <td class="text-center">
            {% if instance.notify %}
            <i class="fa fa-check"></i>
            {% endif %}
          </td>
          <td class="text-center">
            <button type="button"
              class="btn btn-outline-secondary btn-sm buttonEdit m-1"
              data-bs-toggle="tooltip"
              data-bs-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>
            <button
              type="button"
              class="btn btn-outline-secondary btn-sm buttonDelete m-1"
              data-bs-toggle="tooltip"
              data-bs-placement="bottom"
              title="Delete"
              v-on:click.prevent="$refs.delete_modal.open('/json/instances/{{instance.agent_address}}/{{instance.agent_port}}')"
            ><i class="fa fa-trash-o"></i></button>
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div><!-- col -->
</div><!-- vue-app -->

<script type="module" src="{{ vitejs.url_for('settings.instances.js') }}"></script>
{% endblock %}
