{% from "player/_icons.html" import delete_icon %}

<div class="view-page settings-page" data-page="{{ page_key }}">
  <header class="view-header">
    {% include "player/_page_title.html" %}
  </header>

  <section class="settings-panel">
    <div class="settings-panel-header">
      <h2>Metadata Overrides</h2>
    </div>

    <div class="config-table-wrap" {% if not metadata_overrides %}hidden{% endif %}>
      <table class="config-table metadata-overrides-table">
        <thead>
          <tr>
            <th scope="col">Album</th>
            <th scope="col">Provider</th>
            <th scope="col">Entity</th>
            <th scope="col">Related Entity</th>
            <th scope="col">Actions</th>
          </tr>
        </thead>
        <tbody>
          {% for override in metadata_overrides %}
            <tr data-metadata-override-row data-album-id="{{ override.album_id }}">
              <td>
                <div class="musicbrainz-override-album">
                  {% if override.is_current_album %}
                    <a class="settings-link musicbrainz-override-title" href="{{ override.album_url }}" data-nav>{{ override.album|display_album_title }}</a>
                    <div class="musicbrainz-override-meta">
                      {% if override.artist %}{{ override.artist }}{% endif %}{% if override.artist and override.year %} &bull; {% endif %}{% if override.year %}{{ override.year }}{% endif %}
                    </div>
                  {% else %}
                    <div class="musicbrainz-override-title">{{ override.album_id }}</div>
                    <div class="musicbrainz-override-meta">Not in current library</div>
                  {% endif %}
                  <div class="musicbrainz-override-id"><code>{{ override.album_id }}</code></div>
                </div>
              </td>
              <td>{{ override.provider_label }}</td>
              <td>
                <div>{{ override.entity_label }}</div>
                {% if override.entity_url %}
                  <a class="settings-link" href="{{ override.entity_url }}" target="_blank" rel="noreferrer"><code>{{ override.entity_id }}</code></a>
                {% else %}
                  <code>{{ override.entity_id }}</code>
                {% endif %}
              </td>
              <td>
                {% if override.related_entity_id %}
                  <div>{{ override.related_entity_label }}</div>
                  {% if override.related_entity_url %}
                    <a class="settings-link" href="{{ override.related_entity_url }}" target="_blank" rel="noreferrer"><code>{{ override.related_entity_id }}</code></a>
                  {% else %}
                    <code>{{ override.related_entity_id }}</code>
                  {% endif %}
                {% else %}
                  <span class="musicbrainz-id-empty">Not set</span>
                {% endif %}
              </td>
              <td>
                <div class="musicbrainz-override-actions">
                  {% if override.album_edit_url %}
                    <a class="button-link" href="{{ override.album_edit_url }}" data-nav
                      aria-label="Edit metadata override for {{ override.album }}">Edit</a>
                  {% endif %}
                  {% if override.delete_url %}
                    <button
                      class="delete-icon-button"
                      type="button"
                      data-delete-metadata-override
                      data-album-id="{{ override.album_id }}"
                      data-delete-url="{{ override.delete_url }}"
                      aria-label="Delete metadata override for {{ override.album if override.is_current_album else override.album_id }}"
                      title="Delete metadata override"
                    >{{ delete_icon() }}</button>
                  {% endif %}
                </div>
              </td>
            </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
    <div class="empty" {% if metadata_overrides %}hidden{% endif %}>No metadata overrides saved.</div>
  </section>
</div>