{% block stylesheets %}
{{ encore_entry_link_tags('header') }}
{% endblock %}
{% set idioma = app.request.get('_locale') %}
{# Construye la URL del switch de idioma manteniendo la ruta y query string actuales #}
{% set _switchRoute = app.request.attributes.get('_route') %}
{% set _switchParams = app.request.attributes.get('_route_params')|default({}) %}
{% set _switchCanKeep = _switchRoute and '_locale' in _switchParams|keys %}
{% set _switchQs = app.request.queryString %}
{% set urlSwitchEs = _switchCanKeep
? path(_switchRoute, _switchParams|merge({_locale: 'es'})) ~ (_switchQs ? '?' ~ _switchQs : '')
: path('homepage', {_locale: 'es'}) %}
{% set urlSwitchEn = _switchCanKeep
? path(_switchRoute, _switchParams|merge({_locale: 'en'})) ~ (_switchQs ? '?' ~ _switchQs : '')
: path('homepage', {_locale: 'en'}) %}
<header class="header">
<div class="container-home">
<div class="header-content mb-2 mb-xl-0">
<div class="wp-logo">
<button type="button" class="btn-menu" id="btn-menu">
<img src="/images_v2/svg/ico-menu.svg" alt="Menu icon" width="40" height="40"/>
</button>
<a href="{{ path('homepage') }}" class="logo-header logo-tierra-vista">
<img src="/images/logo-tierra-vista.png" alt="Logo tierra a la vista" width="30" height="30" id="logo-header">
</a>
</div>
<div class="buscador-and-options">
<search class="search d-none d-xl-block buscador-wrap" style="position: relative;">
<form class="form-search" action="{{ path('buscar', {_locale: app.request.locale}) }}" method="get" data-buscador>
<input type="search" name="q" autocomplete="off" placeholder="{{ qi.texto('texto-buscar-placeholder') }}" data-buscador-input>
<button type="submit" class="btn-g">
<img src="/images/svg/lupa-negro.svg" alt="Lupa buscador icon" width="40" height="40">
</button>
</form>
<div class="buscador-resultados" data-buscador-resultados hidden></div>
</search>
<div type="button" class="btn-idioma espacio">
<a href="{{ urlSwitchEs }}" class="idioma {% if (idioma == 'es') %}fw-bold{% endif %}">ES</a>
<span class="espacio">/</span>
<a href="{{ urlSwitchEn }}" class="idioma {% if (idioma == 'en') %}fw-bold{% endif %}">EN</a>
</div>
<button type="button" class="btn-g btn-search-toggle espacio d-xl-none" id="btn-search-toggle" aria-expanded="false" aria-controls="mobile-search">
<img src="/images/svg/lupa-negro.svg" alt="Abrir buscador" width="40" height="40">
</button>
{% if not app.user %}
<a href="{{ path('app_login') }}" class="btn-g btn-user espacio d-xl-none">
<img src="/images/svg/user-negro.svg" alt="" width="40" height="40">
<span class="text-user">
Iniciar sesión
</span>
</a>
{% else %}
<a href="{{ path('perfil') }}" class="btn-g btn-user espacio d-xl-none">
<img src="/images/svg/user-negro.svg" alt="" width="40" height="40">
<span class="text-user">
{{app.user}}
</span>
</a>
{% endif %}
<div class="d-none d-lg-block">
<label class="switch">
<input type="checkbox" id="btn-switch-dark-mode">
<span class="slider"></span>
</label>
</div>
{% if not app.user %}
<a href="{{ path('app_login') }}" class="btn-g btn-user espacio d-none d-xl-flex">
<img src="/images/svg/user-negro.svg" alt="" width="40" height="40">
<span class="text-user">
Iniciar sesión
</span>
</a>
{% else %}
<a href="{{ path('perfil') }}" class="btn-g btn-user espacio d-none d-xl-flex">
<img src="/images/svg/user-negro.svg" alt="" width="40" height="40">
<span class="text-user">
{{app.user}}
</span>
</a>
{% endif %}
</div>
</div>
<div class="d-xl-none">
<search class="search search-mobile mb-2 buscador-wrap" id="mobile-search" hidden style="position: relative;">
<form class="form-search" action="{{ path('buscar', {_locale: app.request.locale}) }}" method="get" data-buscador>
<input type="search" name="q" autocomplete="off" placeholder="{{ qi.texto('texto-buscar-placeholder') }}" data-buscador-input>
<button type="submit" class="btn-g">
<img src="/images/svg/lupa-negro.svg" alt="Lupa buscador icon" width="40" height="40">
</button>
</form>
<div class="buscador-resultados" data-buscador-resultados hidden></div>
</search>
</div>
</div>
</header>
<script>
(function() {
const userBtn = document.querySelector('.btn-menu.user');
if (!userBtn) return;
userBtn.addEventListener('click', (e) => {
if (e.target.closest('a')) return;
userBtn.classList.toggle('is-open');
});
document.addEventListener('click', (e) => {
if (!userBtn.contains(e.target)) {
userBtn.classList.remove('is-open');
}
});
})();
</script>
<style>
.buscador-resultados {
position: absolute;
top: 100%;
left: 0;
right: 0;
z-index: 1000;
background: #fff;
border: 1px solid #ddd;
border-top: none;
border-radius: 0 0 8px 8px;
max-height: 320px;
overflow-y: auto;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.buscador-resultados a {
display: block;
padding: 8px 12px;
color: #222;
text-decoration: none;
border-bottom: 1px solid #f0f0f0;
}
.buscador-resultados a:hover {
background: #f5f5f5;
}
.buscador-resultados small {
color: #999;
margin-left: 6px;
}
.buscador-resultados .empty {
padding: 12px;
color: #999;
text-align: center;
}
</style>
<script>
(function () {
const wraps = document.querySelectorAll('[data-buscador]');
wraps.forEach(form => {
const input = form.querySelector('[data-buscador-input]');
const results = form.parentElement.querySelector('[data-buscador-resultados]');
if (!input || !results) return;
let timer = null;
const minChars = 2;
const debounce = 250;
const render = (items) => {
if (!items.length) {
results.innerHTML = '<div class="empty">{{ qi.texto('texto-buscar-sin-resultados')|escape('js') }}</div>';
} else {
results.innerHTML = items.map(it =>
'<a href="' + it.url + '">' +
'<strong>' + escape(it.nombre) + '</strong>' +
'<small>' + (it.tipo === 'subcategoria'
? '{{ qi.texto('texto-buscar-tipo-subcategoria')|escape('js') }}'
: '{{ qi.texto('texto-buscar-tipo-categoria')|escape('js') }}') + '</small>' +
'</a>'
).join('');
}
results.hidden = false;
};
const escape = (s) => String(s).replace(/[&<>"']/g, c => ({
'&': '&', '<': '<', '>': '>', '"': '"', "'": '''
}[c]));
const search = async (q) => {
try {
const res = await fetch('/api/buscar?q=' + encodeURIComponent(q) + '&locale={{ app.request.locale }}');
const data = await res.json();
render(data.results || []);
} catch (e) {
results.hidden = true;
}
};
input.addEventListener('input', () => {
const q = input.value.trim();
clearTimeout(timer);
if (q.length < minChars) {
results.hidden = true;
return;
}
timer = setTimeout(() => search(q), debounce);
});
document.addEventListener('click', (e) => {
if (!form.parentElement.contains(e.target)) {
results.hidden = true;
}
});
input.addEventListener('focus', () => {
if (input.value.trim().length >= minChars) {
results.hidden = false;
}
});
});
})();
</script>
{% block javascripts %}
{{ encore_entry_script_tags('headerJs') }}
{% endblock %}
{#<header>
<div class="content-header mobile">
<span class="btn-menu breadcrumb-header" id="breadcrumb-header" style="display: none;"></span>
{% if (app.request.attributes.get('_route') != 'homepage') %}
<a class="btn-menu btn-back">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-icon="bi:arrow-up-left" class="iconify iconify--bi"><path fill="currentColor" fill-rule="evenodd" d="M2 2.5a.5.5 0 0 1 .5-.5h6a.5.5 0 0 1 0 1H3.707l10.147 10.146a.5.5 0 0 1-.708.708L3 3.707V8.5a.5.5 0 0 1-1 0v-6z"></path></svg>
<span>{{qi.getTexto('back-btn', locale)}}</span>
</a>
{% endif %}
</div>
<div class="content-header desk">
<div class="col-h">
<a href="{{ path('homepage', {_locale: locale}) }}" title="{{qi.getTexto('texto-tooltip-go-to-inicio-home', locale)}}">
<img src="{{ product_images~qi.imagen('logo_home') }}" class="logo" alt="Logo Tierra a la Vista">
</a>
<a class="btn-menu btn-descubrir" id="call-menu">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 32 32" data-icon="la:plus" class="iconify iconify--la"><path fill="currentColor" d="M15 5v10H5v2h10v10h2V17h10v-2H17V5z"></path></svg>
<span>{{qi.getTexto('btn-menu', locale)|raw}}</span>
</a>
{% if (app.request.attributes.get('_route') != 'homepage') %}
<a class="btn-menu btn-back">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-icon="bi:arrow-up-left" class="iconify iconify--bi"><path fill="currentColor" fill-rule="evenodd" d="M2 2.5a.5.5 0 0 1 .5-.5h6a.5.5 0 0 1 0 1H3.707l10.147 10.146a.5.5 0 0 1-.708.708L3 3.707V8.5a.5.5 0 0 1-1 0v-6z"></path></svg>
<span>{{qi.getTexto('back-btn', locale)}}</span>
</a>
{% endif %}
<!-- Aquí inyectamos el Breadcrumb -->
<span class="btn-menu breadcrumb-header" id="breadcrumb-header" style="display: none;"></span>
</div>
<div class="col-h">
<!-- por favor si no esta logueado no debe enviar al perfil si no al login -->
{% if (app.user) %}
<div class="btn-menu user">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 32 32" data-icon="la:user-solid" class="iconify iconify--la"><path fill="currentColor" d="M16 5c-3.855 0-7 3.145-7 7c0 2.41 1.23 4.55 3.094 5.813C8.527 19.343 6 22.883 6 27h2c0-4.43 3.57-8 8-8s8 3.57 8 8h2c0-4.117-2.527-7.656-6.094-9.188A7.024 7.024 0 0 0 23 12c0-3.855-3.145-7-7-7zm0 2c2.773 0 5 2.227 5 5s-2.227 5-5 5s-5-2.227-5-5s2.227-5 5-5z"></path></svg>
{% if (app.user) %}
<span>{{app.user}}</span>
{% endif %}
{% if (app.user) %}
<div class="dropdown-hover">
<ul class="list-dropdown-hover">
<li><a href="{{ path('perfil', {_locale: locale}) }}">{{ qi.texto('btn-perfil', locale) }}</a></li>
<li><a href="{{ path('favoritos',{_locale: locale}) }}">{{ qi.texto('btn-favoritos', locale) }}</a></li>
<li><a href="{{ path('mis-propiedades', {_locale: locale}) }}">{{ qi.texto('btn-mis-propiedades', locale) }}</a></li>
<li><a href="{{ path('ayuda', {_locale: locale}) }}">{{qi.getTexto('text3_footer', locale)|raw}}</a></li>
<li><a href="/logout">{{ qi.texto('btn-cerrar-sesion', locale) }}</a></li>
</ul>
</div>
{% endif %}
</div>
{% else %}
<div class="btn-menu user">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 32 32" data-icon="la:user-solid" class="iconify iconify--la"><path fill="currentColor" d="M16 5c-3.855 0-7 3.145-7 7c0 2.41 1.23 4.55 3.094 5.813C8.527 19.343 6 22.883 6 27h2c0-4.43 3.57-8 8-8s8 3.57 8 8h2c0-4.117-2.527-7.656-6.094-9.188A7.024 7.024 0 0 0 23 12c0-3.855-3.145-7-7-7zm0 2c2.773 0 5 2.227 5 5s-2.227 5-5 5s-5-2.227-5-5s2.227-5 5-5z"></path></svg>
<div class="dropdown-hover">
<ul class="list-dropdown-hover">
<li><a href="{{ path('perfil', {_locale: locale}) }}">{{qi.getTexto('titulo-inicia-sesion', locale)|raw}}</a></li>
<li><a href="{{ path('asociarse',{_locale: locale}) }}">{{qi.getTexto('asociarse', locale)|raw}}</a></li>
</ul>
</div>
</div>
{% endif %}
<div class="s-idioma">
<a href="{{ path('homepage', {_locale: 'es'}) }}" class="btn-menu">
<span class="idioma {% if (idioma == 'es') %}active{% endif %}">ES</span>
</a>
<span>/</span>
<a href="{{ path('homepage', {_locale: 'en'}) }}" class="btn-menu">
<span class="idioma {% if (idioma == 'en') %}active{% endif %}">EN</span>
</a>
</div>
</div>
</div>
</header>#}