{% extends "_types/social_lite/index.html" %}

{% block title %}{{ remote_actor.display_name or remote_actor.preferred_username }} — Rose Ash{% endblock %}

{% block social_content %}
<div class="bg-white rounded-lg shadow-sm border border-stone-200 p-6 mb-6">
  <div class="flex items-center gap-4">
    {% if remote_actor.icon_url %}
      <img src="{{ remote_actor.icon_url }}" alt="" class="w-16 h-16 rounded-full">
    {% else %}
      <div class="w-16 h-16 rounded-full bg-stone-300 flex items-center justify-center text-stone-600 font-bold text-xl">
        {{ (remote_actor.display_name or remote_actor.preferred_username)[0] | upper }}
      </div>
    {% endif %}

    <div class="flex-1">
      <h1 class="text-xl font-bold">{{ remote_actor.display_name or remote_actor.preferred_username }}</h1>
      <div class="text-stone-500">@{{ remote_actor.preferred_username }}@{{ remote_actor.domain }}</div>
      {% if remote_actor.summary %}
        <div class="text-sm text-stone-600 mt-2">{{ remote_actor.summary | safe }}</div>
      {% endif %}
    </div>

    {% if actor %}
      <div class="flex-shrink-0">
        {% if is_following %}
          <form method="post" action="{{ url_for('ap_social.unfollow') }}">
            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
            <input type="hidden" name="actor_url" value="{{ remote_actor.actor_url }}">
            <button type="submit" class="border border-stone-300 rounded px-4 py-2 hover:bg-stone-100">
              Unfollow
            </button>
          </form>
        {% else %}
          <form method="post" action="{{ url_for('ap_social.follow') }}">
            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
            <input type="hidden" name="actor_url" value="{{ remote_actor.actor_url }}">
            <button type="submit" class="bg-stone-800 text-white rounded px-4 py-2 hover:bg-stone-700">
              Follow
            </button>
          </form>
        {% endif %}
      </div>
    {% endif %}
  </div>
</div>

<div id="timeline">
  {% set timeline_type = "actor" %}
  {% set actor_id = remote_actor.id %}
  {% include "social/_timeline_items.html" %}
</div>
{% endblock %}