{% extends "layouts/with_sidebar.html" %}

{% block toolbar_page_actions %}
<basic-dropdown class="button--secondary">
  <span slot="button-contents">New Credential</span>
  <div class="padded" slot="popover">
    <form action="add-service-credential" method="post">
      <button class="button button--secondary" type="submit">Confirm</button>
    </form>
  </div>
</basic-dropdown>
{% endblock %}

{% block sidebar %}
{{ workspace_nav | safe }}
{% endblock %}

{% block main %}
<div 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>
</div>
{% endblock %}

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