{% with title='Followers', url=config.link + '/followers', description='ActivityPub followers', type='index', image=None, skip_header=not config.header, styles=['/css/home.css'] %}
  {% include 'common-head.html' %}
{% endwith %}

<main>
  <div class="container">
    <div class="followers-header">
      <h1>Followers</h1>
      {% if activitypub_handle and config.activitypub_profile_url %}
      <div class="activitypub-handle-container">
        <a class="activitypub-handle" href="{{ config.activitypub_profile_url }}"><span class="handle">{{ activitypub_handle }}</span></a>
      </div>
      {% endif %}
      {% if followers %}
      <div class="followers-stats">
        <span class="followers-total">{{ followers|length }} follower{{ 's' if followers|length != 1 else '' }}</span>
      </div>
      {% endif %}
    </div>

    {% if followers %}
    <div class="followers-list">
      {% for follower in followers %}
        <a class="follower" href="{{ follower.url }}" target="_blank" rel="noopener noreferrer">
          <div class="follower-avatar">
            {% if follower.icon %}
              <img src="{{ follower.icon }}" alt="{{ follower.name }}" loading="lazy">
            {% else %}
              <div class="follower-avatar-placeholder">{{ follower.name[0]|upper if follower.name else '?' }}</div>
            {% endif %}
          </div>
          <div class="follower-info">
            <div class="follower-name">{{ follower.name }}</div>
            {% if follower.username %}
              <div class="follower-handle">@{{ follower.username }}@{{ follower.host }}</div>
            {% endif %}
          </div>
        </a>
      {% endfor %}
    </div>
    {% else %}
    <p class="no-followers">No followers yet.</p>
    {% endif %}
  </div>
</main>

<style>
.followers-header {
  padding-top: 1em;
  margin-bottom: 2rem;
  text-align: center;
}

.followers-header h1 {
  margin: 0 0 0.5rem 0;
}

.followers-stats {
  color: var(--secondary-fg, #666);
  font-size: 0.9rem;
}

@media screen and (max-width: 900px) {
  .followers-list {
    gap: 0;
  }

  .follower {
    border-bottom: 1px solid var(--color-border-primary);
  }
}

@media screen and (min-width: 901px) {
  .followers-list {
    max-width: 900px;
    gap: 1rem;
  }
}

.followers-list {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  margin: 0 auto;
}

.follower {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem;
  border-radius: 8px;
  background: var(--card-bg, #f8f9fa);
  text-decoration: none;
  color: inherit;
  transition: background-color 0.2s, transform 0.2s;
}

.follower:hover {
  background: var(--card-hover-bg, #e9ecef);
  transform: translateY(-1px);
}

.follower-avatar {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--avatar-bg, #dee2e6);
}

.follower-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.follower-avatar-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--avatar-fg, #495057);
}

.follower-info {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.follower-name {
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.follower-handle {
  font-size: 0.75rem;
  color: var(--secondary-fg, #666);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.no-followers {
  text-align: center;
  color: var(--secondary-fg, #666);
  font-style: italic;
}

@media (prefers-color-scheme: dark) {
  .follower {
    background: var(--card-bg, #2d2d2d);
  }
  .follower:hover {
    background: var(--card-hover-bg, #3d3d3d);
  }
  .follower-avatar {
    background: var(--avatar-bg, #444);
  }
  .follower-avatar-placeholder {
    color: var(--avatar-fg, #ccc);
  }
}
</style>

{% include 'footer.html' %}
{% include 'common-tail.html' %}