{% extends 'main.html.twig' %}
{% block javascripts %}
{{ parent() }}
{{ encore_entry_script_tags('profile_show') }}
{{ encore_entry_script_tags('mysongs') }}
{% endblock %}
{% block stylesheets %}
{{ parent() }}
{{ encore_entry_link_tags('profile_show') }}
{{ encore_entry_link_tags('mysongs') }}
{% endblock %}
{% block title %}User Profile{% endblock %}
{% block content %}
{% include 'partials/_back_button.html.twig' %}
<input type="hidden" id="friendId" value="{{ user.id }}">
<div class="container mt-5">
<div class="row mb-5">
<div class="col-12 col-md-3">
<h1 class="" style="color: {{ user.color }}; ">{{ user.username }}</h1>
{% if app.user %}
<div id="is-fiend">
{% if user.id != app.user.id %}
{% if is_friend == false %}
Not friend
{% else %}
Friend
{% endif %}
{% else %}
You
{% endif %}
</div>
{% endif %}
</div>
<div class="col-12 col-md-6" >
</div>
{% if app.user %}
<div class="col-12 col-md-3">
<a style="text-decoration:none;" href="{{ path('chat', {'id': user.id}) }}" class="text-center btn btn-secondary mb-3 p-3"><i class="fas fa-envelope text-white me-2" "></i>Send message</a>
<div id="add-remove" >
{% if user.id != app.user.id %}
{% if is_friend == false %}
<a id="add-friend" style="background-color: green;" class="text-center btn btn-light mb-3 p-3">Add to friends</a>
{% else %}
<a id="remove-friend" style="background-color: red;" class="text-center btn btn-light mb-3 p-3">Remove from friends</a>
{% endif %}
{% endif %}
</div>
</div>
{% else %}
<div class="col-12 col-md-3">
</div>
{% endif %}
</div>
<div class="row">
<div class="col-12 col-md-8">
<div class="row mb-5">
<h4 class="col-12 col-md-3">{% if user.country is defined and user.country != null %}{{ user.country.name }}{% else %}Country{% endif %}</h4>
<div class="col-12 col-md-3">
<div id="flag-container" class="">
{% if user.country is defined and user.country != null %}
<img id="country-flag-show" src="/flags/{{ user.country.code }}.png" alt="Country flag" style="width: 50px;height: auto;">
{% else %}
-
{% endif %}
</div>
</div>
<div class="col-12 col-md-6"></div>
</div>
{% if user.gender is defined and user.gender != ' ' and user.gender != null %}
<div class="row mb-5">
<h4 class="col-12 col-md-3">Gender</h4>
<div class="col-12 col-md-3">
<div id="gender" class="">
{% if user.gender == 'male' %}
<i class="fas fa-mars fa-2x" style="color:#58afd1;"></i>
{% else %}
<i class="fas fa-venus fa-2x" style="color:#dd5074;"></i>
{% endif %}
</div>
</div>
<div class="col-12 col-md-6"></div>
</div>
{% endif %}
<div class="row mb-5">
<h4 class="col-12 col-md-3">Instruments</h4>
<div class="col-12 col-md-9">
{% for instrument in user.instruments %}
{{ instrument.instrument }}
{% if not loop.last %}, {% endif %}
{% endfor %}
</div>
</div>
<div class="row mb-5">
<h4 class="col-12 col-md-3">Music Styles</h4>
<div class="col-12 col-md-9">
{% for musicStyle in user.musicStyles %}
{{ musicStyle.style }}
{% if not loop.last %}, {% endif %}
{% endfor %}
</div>
</div>
</div>
<div class="col-12 col-md-4">
<img id="profile-picture-display"
src="{{ user.profilePicture ? asset('/pictures/' ~ user.profilePicture) : asset('/pictures/default-avatar.png') }}"
alt="Profile Picture"
style="width: 150px; height: 150px; border-radius: 50%; object-fit: cover;">
</div>
</div>
<div class="row mb-5">
<h4 class="col-12 col-md-2">Friends</h4>
<div class="col-12 col-md-10">
{% for friend in user.friends %}
<a class="friend" style="color: {{ friend.color }};" href="{{ path('profile_show', {'id': friend.id}) }}">
{{ friend.username }}
</a>
{% if not loop.last %}, {% endif %}
{% endfor %}
</div>
</div>
<div class="harmoqee-separator"></div>
<div class=" table-active g-4 mt-5">
<p class="text-center">User Songs</p>
<div class="g-4 mt-2">
{% for song in songs %}
<div class="song-container mb-3">
<div class="row mb-1">
<div class="col-md-12">
<h5>{{ song.song.name }}</h5>
</div>
</div>
<div class="row mb-2">
<div class="col-md-12">
{{ song.song.description }}
</div>
</div>
<div class="row mb-1">
<div class="audio-player col-md-12">
<div class="play-button">
<div class="play-circle">
<i class="fas fa-play text-white"></i>
</div>
</div>
<div class="progress-bar">
<span>{{ song.song.name }}</span>
<div class="progress"></div>
<div class="frequency-bars hidden">
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
</div>
</div>
</div>
<audio class="audio-element" src="{{ song_url }}{{ song.song.filename }}"></audio>
</div>
<div class="row mt-1">
<div class="col-md-12">
Participants:
{% for participant in song.song.participants %}
<a class="" style="color: {{ participant.color }};" href="{{ path('profile_show', {'id': participant.id}) }}">{{ participant.username }}</a>
{% endfor %}
</div>
</div>
</div>
{% endfor %}
</div>
</div>
</div>
<div id="alert" class="modal confirm-modal">
<p id="alert-msg"></p>
<div class="d-flex gap-2 mb-3">
<button class="close-modal-btn btn btn-secondary w-100 d-flex align-items-center justify-content-center close-modal-btn" >
Close
</button>
</div>
</div>
{% endblock %}