{% extends "base.html" %}
{% block title %}Playlist Permissions — {{ target_user.username }}{% endblock %}

{% block content %}
<div style="margin-bottom: 1.5rem;">
  <a href="{{ url_for('admin.user_management') }}" class="btn btn-secondary">← Back to Users</a>
</div>

<div class="card">
  <h2 style="margin-bottom: 0.25rem;">
    🎬 Playlist Edit Permissions
  </h2>
  <p style="color: var(--text-secondary); margin-bottom: 1.5rem;">
    User: <strong>{{ target_user.username }}</strong>
    <span class="badge badge-{{ 'success' if target_user.role == 'editor' else 'secondary' }}" style="margin-left: 0.5rem;">
      {{ target_user.role }}
    </span>
  </p>

  {% if target_user.role in ('admin', 'editor') %}
  <div class="alert alert-info" style="background:#d1ecf1; border-left:4px solid #17a2b8; color:#0c5460; padding:1rem; border-radius:6px;">
    ℹ️ This user already has <strong>{{ target_user.role }}</strong> access — they can edit <em>all</em> playlists automatically.
    Playlist-level permissions are only relevant for <strong>viewer</strong> role users.
  </div>
  {% else %}
  <p style="color: var(--text-secondary); margin-bottom: 1.5rem; font-size: 0.9rem;">
    Select which playlists this viewer may add, remove and reorder content in.
    They will still be able to <em>view</em> all playlists regardless of this setting.
  </p>

  <form method="POST" action="{{ url_for('admin.save_playlist_permissions', user_id=target_user.id) }}">
    {% if playlists %}
    <table style="width:100%; border-collapse:collapse; margin-bottom:1.5rem;">
      <thead>
        <tr style="border-bottom: 2px solid var(--border-color);">
          <th style="padding:10px 12px; text-align:left;">Playlist</th>
          <th style="padding:10px 12px; text-align:left; color: var(--text-secondary); font-size:0.85rem;">Description</th>
          <th style="padding:10px 12px; text-align:center;">Can Edit?</th>
        </tr>
      </thead>
      <tbody>
        {% for playlist in playlists %}
        <tr style="border-bottom: 1px solid var(--border-color);">
          <td style="padding:12px;">
            <strong>{{ playlist.name }}</strong>
            <div style="font-size:0.8rem; color: var(--text-secondary);">
              {{ playlist.content_count }} items · {{ playlist.player_count }} player(s)
            </div>
          </td>
          <td style="padding:12px; color: var(--text-secondary); font-size:0.9rem;">
            {{ playlist.description or '—' }}
          </td>
          <td style="padding:12px; text-align:center;">
            <label style="display:inline-flex; align-items:center; gap:8px; cursor:pointer;">
              <input type="checkbox"
                     name="playlist_{{ playlist.id }}"
                     value="1"
                     {{ 'checked' if playlist.id in granted_ids else '' }}
                     style="width:18px; height:18px; cursor:pointer;">
            </label>
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>

    <div style="display:flex; gap:1rem;">
      <button type="submit" class="btn btn-primary">💾 Save Permissions</button>
      <a href="{{ url_for('admin.user_management') }}" class="btn btn-secondary">Cancel</a>
    </div>
    {% else %}
    <p style="color: var(--text-secondary);">No playlists created yet.</p>
    {% endif %}
  </form>
  {% endif %}
</div>
{% endblock %}