{% extends "base.html" %}

{% block head_extras %}
<script type="module" src="{{ settings.root_path }}/js_dist/copy-source.webc.mjs"></script>
{% endblock %}

{% block main %}
<div class="page-grid">
  <div class="page-grid__toolbar">
    <div class="page-grid__toolbar-utilities">
      <basic-dropdown button-class="button--secondary" button-label="New Credential">
        <span slot="button-contents">New Credential</span>
        <div class="padded" slot="popover">
          <form action="add-service-credential" method="post">
            <button class="button--secondary" type="submit">Confirm</button>
          </form>
        </div>
      </basic-dropdown>
    </div>
    {% include "toolbar_user.html" %}
  </div>
  <div class="page-grid__sidebar">
    <div style="padding: 1rem;">
      {{ workspace_nav | safe }}
    </div>
  </div>
  <main class="page-grid__main padded--lg">
    <table class="table">
      <thead>
        <tr>
          <th scope="col">Connection String</th>
          <th scope="col">Permissions</th>
          <th scope="col">Actions</th>
        </tr>
      </thead>
      <tbody>
        {% if service_cred_info.is_empty() %}
        <tr class="table__message">
          <td colspan="999">No data</td>
        </tr>
        {% endif %}
        {% for cred in service_cred_info %}
        <tr>
          <td>
            <copy-source copy-data="{{ cred.conn_string.expose_secret() }}">
              <span aria-label="Copy postgresql URL" title="Copy URL">
                <code class="phono-code">{{ cred.conn_string_redacted }}</code>
                <i class="ti ti-clipboard"></i>
              </span>
              <code class="phono-code" slot="fallback">{{ cred.conn_string.expose_secret() }}</code>
            </copy-source>
          </td>
          <td>
            {% for role_display in cred.member_of %}
            {{ role_display | safe }}
            {% endfor %}
            <button
              popovertarget="permissions-editor-{{ cred.service_cred.rolname }}"
              popovertargetaction="toggle"
              type="button"
            >
              Edit
            </button>
            <dialog
              class="dialog padded--lg"
              id="permissions-editor-{{ cred.service_cred.rolname }}"
              popover="auto"
            >
              <form action="{{ cred.service_cred.id.simple() }}/update-permissions" method="post">
                <table class="table">
                  <thead>
                    <tr>
                      <th scope="col">Table</th>
                      <th scope="col">Reader</th>
                      <th scope="col">Writer</th>
                    </tr>
                  </thead>
                  <tbody>
                    {% for rel in all_rels %}
                      <tr>
                        <td>{{ rel.relname }}</td>
                        <td style="text-align: center;">
                          <input
                            type="checkbox"
                            name="{{ rel.oid.0 }}"
                            value="reader"
                            {%- if cred.is_reader_of(rel.relname) %}
                            checked="true"
                            {%- endif %}
                          >
                        </td>
                        <td style="text-align: center;">
                          <input
                            type="checkbox"
                            name="{{ rel.oid.0 }}"
                            value="writer"
                            {%- if cred.is_writer_of(rel.relname) %}
                            checked="true"
                            {%- endif %}
                          >
                        </td>
                      </tr>
                    {% endfor %}
                  </tbody>
                </table>
                <button
                  class="button--primary"
                  style="margin-top: 16px;"
                  type="submit"
                >
                  Save
                </button>
              </form>
            </dialog>
          </td>
          <td></td>
        </tr>
        {% endfor %}
      </tbody>
    <table>
  </main>
</div>
{% endblock %}