{% extends "base.html" %}
{% block content %}
  <h1 class="h3">Company dashboard</h1>

  <div class="row mt-4">
    <div class="col-md-6">
      <h2 class="h5">Playlists</h2>
      <form method="post" action="{{ url_for('company.create_playlist') }}" class="card card-body mb-3">
        <div class="input-group">
          <input class="form-control" name="name" placeholder="New playlist name" required />
          <button class="btn btn-success" type="submit">Add</button>
        </div>
      </form>

      <div class="list-group">
        {% for p in playlists %}
          <div class="list-group-item">
            <div class="d-flex justify-content-between align-items-center">
              <a class="text-decoration-none" href="{{ url_for('company.playlist_detail', playlist_id=p.id) }}">
                <strong>{{ p.name }}</strong> <span class="text-muted">({{ p.items|length }} items)</span>
              </a>
              <form method="post" action="{{ url_for('company.delete_playlist', playlist_id=p.id) }}" onsubmit="return confirm('Delete playlist? This will remove all items and unassign it from displays.');">
                <button class="btn btn-outline-danger btn-sm" type="submit">Delete</button>
              </form>
            </div>
          </div>
        {% else %}
          <div class="text-muted">No playlists yet.</div>
        {% endfor %}
      </div>
    </div>

    <div class="col-md-6">
      <h2 class="h5">Displays</h2>
      <div class="list-group">
        {% for d in displays %}
          <div class="list-group-item">
            <div class="d-flex justify-content-between align-items-center">
              <div>
                <div><strong>{{ d.name }}</strong></div>
                <div class="text-muted">Player URL: <a href="{{ url_for('display.display_player', token=d.token, _external=true) }}" target="_blank">open</a></div>
              </div>
              <div style="min-width: 220px;">
                <form method="post" action="{{ url_for('company.assign_playlist', display_id=d.id) }}" class="d-flex gap-2">
                  <select class="form-select form-select-sm" name="playlist_id">
                    <option value="">(none)</option>
                    {% for p in playlists %}
                      <option value="{{ p.id }}" {% if d.assigned_playlist_id == p.id %}selected{% endif %}>{{ p.name }}</option>
                    {% endfor %}
                  </select>
                  <button class="btn btn-primary btn-sm" type="submit">Assign</button>
                </form>
              </div>
            </div>
          </div>
        {% else %}
          <div class="text-muted">No displays. Ask admin to add displays.</div>
        {% endfor %}
      </div>
    </div>
  </div>
{% endblock %}