{% extends "base.html" %}

{% 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>Connection String</th>
          <th>Permissions</th>
          <th>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() }}">
              <slot><code class="code">{{ cred.conn_string_redacted }}</code></slot>
              <slot name="fallback">
                <code class="code">{{ cred.conn_string.expose_secret() }}</code>
              </slot>
            </copy-source>
          </td>
        </tr>
        {% endfor %}
      </tbody>
    <table>
  </main>
</div>
{% endblock %}