{% extends 'main.html.twig' %}
{% block javascripts %}
{{ parent() }}
{{ encore_entry_script_tags('front') }}
{% endblock %}
{% block stylesheets %}
{{ parent() }}
{{ encore_entry_link_tags('front') }}
{% endblock %}
{% block title %}Harmoqee{% endblock %}
{% block content %}
{#% include 'partials/_back_button.html.twig' %#}
{% set form_html %}
<div class="row"><button class="w-25 ms-2 btn btn-primary btn btn-primary">Search</button></div>
<div class="row mt-3 text-center"><h2>Instruments</h2></div>
<div class="row">
{% for checkbox in form.instruments %}
<div class="col-12 col-md-3">
<div class="form-check">
{{ form_widget(checkbox, {'attr': {'class': 'form-check-input'}}) }}
{{ form_label(checkbox, null, {'attr': {'class': 'form-check-label'}}) }}
{{ form_errors(checkbox) }}
</div>
</div>
{% if loop.index % 4 == 0 %}
</div><div class="row">
{% endif %}
{% endfor %}
</div>
<div class="row mt-3 text-center">
<h2>Music Genres</h2>
</div>
<div class="row music-styles-selector">
{% set i = 0 %}
{% set cerrar_div = false %}
{% for musicGenre in musicGenres %}
{% if (i % 4) == 0 %}
{% if cerrar_div %} </div>{% set cerrar_div = false %}{% endif %}
<div class="col-12 col-md-3">
{% set cerrar_div = true %}
{% endif %}
<div>
<!-- Checkbox del género -->
<label class="bg-secondary w-100 p-2">
<input type="checkbox" class="genre-checkbox" data-genre="{{ musicGenre.id }}">
{{ musicGenre.genre }}
</label>
<div class="m-2">
<!-- Checkboxes de estilos -->
{% for musicStyle in musicGenre.musicStyles %}
<label>
<input type="checkbox" name="user_search[musicStyles][]" value="{{ musicStyle.id }}"
class="style-checkbox" data-style-for-genre="{{ musicGenre.id }}"
{% if musicStyle in form.children.musicStyles.vars.data %} checked {% endif %}>
{{ musicStyle.style }}
</label><br>
{% endfor %}
</div>
</div>
{% set i = i + 1 %}
{% endfor %}
{% if cerrar_div %} </div>{% endif %}
<div class="row mt-3"><button class="w-25 ms-2 btn btn-primary btn btn-primary">Search</button></div>
</div>
{% endset %}
{% for label, messages in app.flashes %}
<div class="alert alert-{{ label }} alert-dismissible fade show" role="alert">
{% for message in messages %}
{{ message }}
{% endfor %}
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
{% endfor %}
<div class="row">
<div class="col-12 video-container">
<video id="introVideo" autoplay muted >
<source src="{{ asset('images/harmoqee2.mp4') }}" type="video/mp4">
Your browser does not support video playback.
</video>
<img id="introImage" src="{{ asset('images/harmoqee.jpg') }}" alt="Harmoqee" style="display: none;">
</div>
</div>
<div class="container mt-4 abstract">
<h1 class="text-white text-center pb-2">Create music with musicians from all over the world.</h1>
<div class="harmoqee-separator"></div>
<div class="row justify-content-center g-4 boxes mt-1 pb-5">
{# columna izquierda #}
{#
<div class="col-12 col-md-12 ">
<p class="text-center text-white mt-3">What do you feel like doing today?</p>
<div class="justify-content-center gap-2 d-flex flex-wrap mb-4">
<a class="btn2 btn draw-border " href="{{ url('home_join') }}">
<h5 class="main-title mb-4 mt-2">Join a Project</h5>
<div class="icon"><i class="fa-solid fa-right-to-bracket fa-2x mb-4"></i></div>
<p>Find a song to participate in.</p>
</a>
<a class="btn2 btn draw-border" href="{{ url('project_new') }}">
<h5 class="main-title mb-4 mt-2">Create a New Project</h5>
<div class="icon"><i class="fa-solid fa-lightbulb fa-2x mb-4"></i></div>
<p>Find musicians to complete your idea.</p>
</a>
</div>
<p class="text-center text-white mt-3 mb-5">...or ontinue with an <a href="{{ url('project_list') }}">ongoing project</a>.</p>
#}
<h3 class="text-center ">What's going on in Harmoqee?</h3>
<h5 class="text-center ">What is being played?</h5>
<div class="d-flex justify-content-between align-items-center">
<button id="prevBtn" class="btn btn-primary">«</button>
<div id="projectContainer" class="d-flex overflow-hidden flex-nowrap" style="width: 80%; gap: 10px;">
{# Aquí se cargarán los proyectos con AJAX #}
</div>
<button id="nextBtn" class="btn btn-primary">»</button>
</div>
<h5 class="text-center ">What is being talked about?</h5>
<div class="col-12 col-lg-7 col-xl-9 w-80">
<div class="ads-window mb-3 border border-white">
<div id="adsContainer" class="flex-nowrap" style="">
</div>
</div>
{% if app.user %}
<div class="row mb-3">
<div class="col-md-8">
<textarea id="ad-text" class="w-100" placeholder="Example: I'm looking for people to create a rock song."></textarea>
</div>
<div class="d-flex gap-2 mb-3 col-md-4">
<button id="sendAd" class="btn btn-outline-primary w-100 d-flex align-items-center justify-content-center" >
<i class="fas fa-bullhorn me-2"></i> Publish
</button>
</div>
</div>
{% endif %}
</div>
{#
{% if app.user %}
<div class=" mb-1">
<a href="#div-post-ad" rel="modal:open" class="btn btn-outline-primary" role="button">
<i class="fas fa-bullhorn me-2"></i> Post Ad
</a>
</div>
{% endif %}
<div class="d-flex justify-content-between align-items-center mb-3">
<button id="adPrevBtn" class="btn btn-primary">«</button>
<div id="adsContainer" class="d-flex overflow-hidden flex-nowrap" style="width: 80%; gap: 10px;">
</div>
<button id="adNextBtn" class="btn btn-primary">»</button>
</div>
#}
<div class="row justify-content-center g-4 boxes mt-1 pb-5 border-top border-primary pt-5">
{# columna izquierda #}
<div class="col-12 col-md-12">
<h3 class="text-center ">Avilable Musicians</h3>
<div class="dropdown w-100 mb-3">
<div class="row">
<a class="btn btn-primary dropdown-toggle" href="#" role="button" id="dropdownFilters" aria-expanded="false">
Show filters
</a>
</div>
<div class="dropdown-filter" aria-labelledby="dropdownMenuLink">
<form name="user" method="post" id="user-search">
{{ form_html|raw }}
</form>
</div>
</div>
{# Paginacion #}
<div id="users-container" class="w-100 ">
{% include 'user/_list.html.twig' %}
</div>
</div>
{# <div class="col-12 col-md-4 ">
<h3 class="text-center ">Avilable Projects</h3>
<div id="projects-container" class="w-100 ">
{% include 'project/_list.html.twig' %}
</div>
</div>#}
</div>
{#% if users is not empty %}
{% for user in users %}
<div class=" mb-3 card border border-secondary card-user" >
<div class="d-flex flex-column flex-md-row flex-wrap card-header bg-secondary text-white">
<div class="w-50 text-left"><h3>{{ user.username }}</h3></div>
<div class="w-50 justify-content-center d-flex flex-wrap">
<a href="{{ path('profile_show', {'id': user.id}) }}" class="invite-button btn btn-secondary w-50 d-flex align-items-center justify-content-center">
<i class="fas fa-eye me-2"></i> Show
</a>
<a href="{{ path('chat', {'id': user.id})}}" class="invite-button btn btn-secondary w-50 d-flex align-items-center justify-content-center">
<i class="fas fa-envelope me-2"></i> Message
</a>
</div>
</div>
<div class="card-body row">
<div class="col-12 col-md-2">
<img id="profile-picture-display"
src="{{ user.profilePictureSmall ? asset('/pictures/' ~ user.profilePictureSmall) : asset('/pictures/default-avatar.png') }}"
alt="Profile Picture"
>
</div>
<div class="col-12 col-md-10">
<p class="card-text"><b>Instruments:</b>
{% for instrument in user.instruments %}
{{ instrument.instrument }}
{% if not loop.last %}, {% endif %}
{% endfor %}
</p>
<p class="card-text"><b>Music Styles:</b>
{% for musicStyle in user.musicStyles %}
{{ musicStyle.style }}
{% if not loop.last %}, {% endif %}
{% endfor %}
</p>
</div>
</div>
</div>
{% endfor %}
{% else %}
<p>No se encontraron usuarios con el nombre "{{ username }}".</p>
{% endif %#}
</div>
{# columna derecha #}
{# <div class="col-12 col-md-4 ">
<p class="text-center text-white mt-2">Ongoing projects</p>
{% if projects %}
{% for project in projects %}
<div class="mb-3 card border border-secondary">
<div class="card-header bg-secondary text-white text-center">{{ project.name }}</div>
<div class="row">
<div class="col-md-9 description text-decoration-none text-left" >
<div class="w-100 p-1">
{{ project.description }}
</div>
<div class="w-100 p-1">
{% for participant in project.participants %}
<a class="" style="color: {{ participant.user.color }};" href="{{ path('profile_show', {'id': participant.user.id}) }}">{{ participant.user.username }}</a>
{% if participant.user == project.user %}
<small>(Creator)</small>
{% endif %}
{% endfor %}
</div>
</div>
<div class="col-md-3 participants ">
<div class="w-100 p-3">
<a class="title text-decoration-none btn btn-primary" href="{{ path('project', {'id': project.id}) }}">Enter</a>
</div>
</div>
</div>
</div>
{% endfor %}
{% else %}
<p class="text-center text-grey fst-italic">Not active projects yet.</p>
{% endif %}
</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>
<div id="div-send-request" class="modal confirm-modal">
<p>Do you want to send a request to join the project?</p>
<div class="d-flex gap-2 mb-3">
<button id="confirmRequestYes" class="btn btn-primary w-50 d-flex align-items-center justify-content-center" >
Yes
</button>
<button id="confirmRequestNo" class="close-modal-btn btn btn-secondary w-50 d-flex align-items-center justify-content-center" data-index="'+trackInfo['id']+'">
No
</button>
</div>
</div>
<div id="div-post-ad" class="modal confirm-modal">
<p>Write you message</p>
<div class="row mb-3">
<textarea id="ad-text" placeholder="Writte your add"></textarea>
</div>
<div class="d-flex gap-2 mb-3">
<button id="sendAd" class="btn btn-primary w-50 d-flex align-items-center justify-content-center" >
Publish
</button>
<button id="closeAd" class="close-modal-btn btn btn-secondary w-50 d-flex align-items-center justify-content-center" data-index="'+trackInfo['id']+'">
Close
</button>
</div>
</div>
{% endblock %}