{% extends 'layouts/base.html' %}
{% load static %}

{% block title %}Amigos{% endblock title %}

{% block extrahead %}
    <link rel="stylesheet" href="{% static 'css/friends.css' %}">
{% endblock extrahead %}

{% block content %}
<!-- [ Main Content ] start -->
<div class="row">
  <div class="col-sm-12">
    <div class="card">
      <div class="card-header d-flex align-items-center">
        <i class="fas fa-users mr-2"></i>
        <h5 class="mb-0">Amigos e Conexões</h5>
      </div>
      <div class="card-body">

        <!-- Lista de Amigos -->
        <div class="section-header mb-3">
          <h6><i class="fas fa-users mr-2"></i>Meus Amigos</h6>
        </div>
        <ul class="list-group mb-4">
          {% for friendship in accepted_friendships %}
            <li class="list-group-item d-flex justify-content-between align-items-center">
              <div class="d-flex align-items-center">
                {% if friendship.friend.avatar %}
                  <img src="{% url 'serve_files:serve_decrypted_file' 'home' 'user' 'avatar' friendship.friend.uuid %}" alt="{{ friendship.friend.username }}" class="img-fluid rounded-circle" style="width: 40px; height: 40px; margin-right: 10px;">
                {% else %}
                  <img src="{% static 'assets/img/team/generic_user.png' %}" alt="default profile image" class="img-fluid rounded-circle" style="width: 40px; height: 40px; margin-right: 10px;">
                {% endif %}
                <span>{{ friendship.friend.username }}</span>
              </div>
              <a href="{% url 'message:remove_friend' friendship.id %}" class="btn btn-danger btn-sm">Deixar de Ser Amigo</a>
            </li>
          {% empty %}
            <li class="list-group-item">Nenhum amigo adicionado ainda.</li>
          {% endfor %}
        </ul>

        <!-- Adicionar Amigos -->
        <div class="section-header mb-3">
          <h6><i class="fas fa-user-plus mr-2"></i>Adicionar Novos Amigos</h6>
        </div>
        <ul class="list-group mb-4">
          {% for user in users %}
            <li class="list-group-item d-flex justify-content-between align-items-center">
              <div class="d-flex align-items-center">
                {% if user.avatar %}
                  <img src="{{ user.avatar.url }}" alt="{{ user.username }}" class="img-fluid rounded-circle" style="width: 40px; height: 40px; margin-right: 10px;">
                {% else %}
                  <img src="{% static 'assets/img/team/generic_user.png' %}" alt="default profile image" class="img-fluid rounded-circle" style="width: 40px; height: 40px; margin-right: 10px;">
                {% endif %}
                <span>{{ user.username }}</span>
              </div>
              <a href="{% url 'message:send_friend_request' user.id %}" class="btn btn-primary btn-sm">
                Enviar Pedido
              </a>
            </li>
          {% empty %}
            <li class="list-group-item">Nenhum usuário disponível para adicionar.</li>
          {% endfor %}
        </ul>

        <!-- Convites de Amizade -->
        <div class="section-header mb-3">
          <h6><i class="fas fa-user-friends mr-2"></i>Convites Pendentes</h6>
        </div>
        <ul class="list-group">
          {% for request in pending_friend_requests %}
            <li class="list-group-item d-flex justify-content-between align-items-center">
              <div>{{ request.user.username }}</div>
              <div>
                <a href="{% url 'message:accept_friend_request' request.id %}" class="btn btn-success btn-sm mr-1">Aceitar</a>
                <a href="{% url 'message:reject_friend_request' request.id %}" class="btn btn-danger btn-sm">Recusar</a>
              </div>
            </li>
          {% empty %}
            <li class="list-group-item">Nenhum convite de amizade recebido.</li>
          {% endfor %}
        </ul>

      </div>
    </div>
  </div>
</div>
<!-- [ Main Content ] end -->
{% endblock content %}