{% extends "core/base/base.html" %}
{% comment %}
SPDX-FileCopyrightText: 2022 Helmholtz-Zentrum Dresden-Rossendorf (HZDR)

SPDX-License-Identifier: GPL-3.0-or-later
{% endcomment %}
{% block title %}
  Remote Server Logins
{% endblock title %}
{% block content %}
  <h3 class="mb-3">Remote Server Logins</h3>
  <p>
    Logins added here can be used to access resources like files on remote servers or
    workstations.
  </p>
  {% if logins %}
    <form method="post">
      {% csrf_token %}
      <table class="table">
        <tr>
          <th style="width: 10%;">ID</th>
          <th style="width: 20%;">Type</th>
          <th style="width: 34%;">Name</th>
          <th></th>
        </tr>
        {% for login in logins %}
          <tr>
            <td class="align-middle">{{ login.login_info_id }}</td>
            <td class="align-middle">{{ login.type }}</td>
            <td class="align-middle">{{ login.name }}</td>
            <td class="align-middle">
              <div class="container">
                <div class="row">
                  {% if login.type == login_types.SSH %}
                    <div class="col-md d-grid text-nowrap ps-2 pe-0 py-1">
                      {% if login.connected %}
                        <a class="btn btn-warning {% if update %}disabled{% endif %}"
                           href="{% url 'core:remote_server_logout' login.pk %}">Disconnect</a>
                      {% else %}
                        <a class="btn btn-success {% if update %}disabled{% endif %}"
                           href="{% url 'core:remote_server_login' login.pk %}">Connect</a>
                      {% endif %}
                    </div>
                  {% else %}
                    <div class="col-md ps-2 pe-0" style="min-width: 33%"></div>
                  {% endif %}
                  <div class="col-md d-grid ps-2 pe-0 py-1">
                    <a class="btn btn-secondary {% if update or login.connected %}disabled{% endif %}"
                       href="{% url 'core:user_login_update' login.pk %}">Edit</a>
                  </div>
                  <div class="col-md d-grid ps-2 pe-0 py-1">
                    <button class="btn btn-danger"
                            {% if update %}disabled{% endif %}
                            name="remove"
                            value="{{ login.pk }}">Remove</button>
                  </div>
                </div>
              </div>
            </td>
          </tr>
        {% endfor %}
      </table>
    </form>
  {% endif %}
  <br />
  {% if update %}
    <h4>Update a Login</h4>
  {% else %}
    <h4>Add a Login</h4>
  {% endif %}
  <form method="post" x-data='{ type: "{{ login_type|default:"" }}" }'>
    {% csrf_token %}
    <table class="table">
      <tr>
        <th class="align-middle" style="width:30%">Login Type</th>
        <td>
          <select name="type"
                  id="type_select"
                  x-model="type"
                  class="form-select w-50"
                  required="required">
            <option value="" disabled selected>Choose a Login Type</option>
            {% for t in login_types %}<option value="{{ t }}">{{ t }}</option>{% endfor %}
          </select>
        </td>
      </tr>
      <tr id="name" style="display: none" x-show="type !== ''">
        <th class="align-middle" style="width:30%">Name of this login info</th>
        <td>
          <input name="name"
                 id="name_input"
                 value="{{ form.instance.name }}"
                 :required="type !== ''"
                 class="form-control w-50" />
        </td>
      </tr>
      <tr id="machine" style="display: none" x-show="type === 'ssh connection'">
        <th class="align-middle" style="width:30%">Machine</th>
        <td>
          <input name="machine"
                 id="machine_input"
                 value="{{ form.instance.machine }}"
                 :required="type === 'ssh connection'"
                 class="form-control w-50" />
        </td>
      </tr>
      <tr id="via" style="display: none" x-show="type === 'ssh connection'">
        <th class="align-middle" style="width:30%">Indirect via</th>
        <td>
          <select name="via" class="form-select w-50">
            <option value="">no indirect SSH connection</option>
            {% for possibility in ssh_logins %}
              <option value="{{ possibility.pk }}"
                      {% if possibility == object.via %}selected{% endif %}
                      {% if possibility == object %}disabled{% endif %}>{{ possibility.name }}</option>
            {% endfor %}
          </select>
        </td>
      </tr>
      <tr id="username_password"
          style="display: none"
          x-show="type === 'ssh connection'">
        <th class="align-middle" style="width:30%">
          Username
          / Password
        </th>
        <td>
          After adding a SSH login you can click the Connect button to log in.
          <br />
          That way we don't have to store your password.
        </td>
      </tr>
      <tr id="key"
          style="display: none"
          x-show="type === 'authentication token'">
        <th class="align-middle" style="width:30%">Token</th>
        <td>
          <input name="key"
                 id="key_input"
                 value="{{ form.instance.key }}"
                 :required="type === 'authentication token'"
                 class="form-control w-50" />
        </td>
      </tr>
      <tr id="username"
          style="display: none"
          x-show="type === 'username and password'">
        <th class="align-middle" style="width:30%">Username</th>
        <td>
          <input name="username"
                 id="username_input"
                 value="{{ form.instance.username }}"
                 :required="type === 'username and password'"
                 class="form-control w-50" />
        </td>
      </tr>
      <tr id="password"
          style="display: none"
          x-show="type === 'username and password'">
        <th class="align-middle" style="width:30%">Password</th>
        <td>
          <input name="password"
                 id="password_input"
                 value="{{ form.instance.password }}"
                 :required="type === 'username and password'"
                 class="form-control w-50"
                 type="password" />
        </td>
      </tr>
      <tr id="slurm" style="display: none" x-show="type === 'ssh connection'">
        <th class="align-middle" style="width:30%">Cluster with Slurm support</th>
        <td class="align-middle">
          <input name="slurm"
                 type="checkbox"
                 {% if form.instance.slurm %}checked{% endif %} />
        </td>
      </tr>
    </table>
    <table>
      <tr>
        {% if update %}
          <td style="padding-left: 0.75rem">
            <button class="btn btn-primary">Save</button>
          </td>
          <td style="padding-left: 0.75rem">
            <a class="btn btn-secondary" href="{% url 'core:user_login_list' %}">Cancel</a>
          </td>
        {% else %}
          <td style="padding-left: 0.75rem">
            <button class="btn btn-primary">Add</button>
          </td>
        {% endif %}
      </tr>
    </table>
    {{ form.errors }}
  </form>
{% endblock content %}