{% 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 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>
            {{ cred.permissions_editor | safe }}
          </td>
          <td></td>
        </tr>
        {% endfor %}
      </tbody>
    <table>
  </main>
</div>
{% endblock %}