{% extends 'base.html.twig' %}
{% block title %}Dashboard{% endblock %}
{% block body %}
  <h1 class="h4 mb-3">Your dashboard</h1>
  {% for msg in app.flashes('success') %}<div class="alert alert-success">{{ msg }}</div>{% endfor %}

  <div class="row g-3 mb-4">
    <div class="col-sm-4">
      <div class="card h-100">
        <div class="card-body">
          <div class="text-secondary">Review Count</div>
          <div class="display-6">{{ reviewCount }}</div>
        </div>
      </div>
    </div>
    <div class="col-sm-4">
      <div class="card h-100">
        <div class="card-body">
          <div class="text-secondary">Album Count</div>
          <div class="display-6">{{ albumCount }}</div>
        </div>
      </div>
    </div>
    <div class="col-sm-4">
      <div class="card h-100">
        <div class="card-body">
          <div class="text-secondary">User Type</div>
          <div class="display-6">{{ userType }}</div>
        </div>
      </div>
    </div>
  </div>

  <div class="card">
    <div class="card-body">
      <h2 class="h6">Profile</h2>
      <div class="row g-3">
        <div class="col-sm-6">
          <label class="form-label">Email</label>
          <input class="form-control" value="{{ email }}" readonly />
        </div>
        <div class="col-sm-6">
          <label class="form-label">Display name</label>
          <input class="form-control" value="{{ displayName }}" readonly />
        </div>
      </div>
      <div class="mt-3">
        <a class="btn btn-outline-secondary" href="{{ path('account_password') }}">Change password</a>
      </div>
    </div>
  </div>

  <div class="row g-3 mt-3">
    <div class="col-md-6">
      <div class="card h-100">
        <div class="card-body">
          <h2 class="h6 mb-3">Your reviews</h2>
          <div class="vstack gap-2">
            {% for r in userReviews %}
              <div>
                <div><a href="{{ path('review_show', {id: r.id}) }}" class="text-decoration-none">{{ r.title }}</a> <span class="text-secondary">(Rating {{ r.rating }}/10)</span></div>
                <div class="text-secondary small">{{ r.album.name }} • {{ r.createdAt|date('Y-m-d H:i') }}</div>
              </div>
            {% else %}
              <div class="text-secondary">You haven't written any reviews yet.</div>
            {% endfor %}
          </div>
        </div>
      </div>
    </div>
    <div class="col-md-6">
      <div class="card h-100">
        <div class="card-body">
          <h2 class="h6 mb-3">Your albums</h2>
          <div class="vstack gap-2">
            {% for a in userAlbums %}
              <div class="d-flex justify-content-between">
                <div>
                  <div><a href="{{ path('album_show', {id: a.localId}) }}" class="text-decoration-none">{{ a.name }}</a></div>
                  <div class="text-secondary small">{{ a.artists|join(', ') }}{% if a.releaseDate %} • {{ a.releaseDate }}{% endif %}</div>
                </div>
                <div class="ms-2">
                  <a class="btn btn-sm btn-outline-secondary" href="{{ path('album_edit', {id: a.localId}) }}">Edit</a>
                </div>
              </div>
            {% else %}
              <div class="text-secondary">You haven't created any albums yet.</div>
            {% endfor %}
          </div>
        </div>
      </div>
    </div>
  </div>
{% endblock %}