112 lines
4.0 KiB
HTML
112 lines
4.0 KiB
HTML
<div class="hero-banner-container">
|
|
<div class="hero-banner position-relative rounded">
|
|
<div
|
|
class="hero-media"
|
|
aria-hidden="true"
|
|
[ngStyle]="{
|
|
'background-image': heroConfig?.background_image_id
|
|
? 'url(' + heroConfig.background_image_id + ')'
|
|
: 'none',
|
|
}"
|
|
></div>
|
|
|
|
@if (heroConfig) {
|
|
<div
|
|
class="hero-content d-flex justify-content-end p-4 p-md-5 w-100 h-100 align-items-center"
|
|
>
|
|
<div class="hero-text-box">
|
|
@if (heroConfig.title_html) {
|
|
<div class="hero-title" [innerHTML]="heroConfig.title_html"></div>
|
|
}
|
|
@if (heroConfig.description_html) {
|
|
<div class="hero-description" [innerHTML]="heroConfig.description_html"></div>
|
|
}
|
|
@if (heroConfig.button_text) {
|
|
<a
|
|
[href]="heroConfig.button_href || '#'"
|
|
class="hero-action text-decoration-none mt-3 d-inline-block"
|
|
>
|
|
<app-button variant="primary">
|
|
{{ heroConfig.button_text }}
|
|
</app-button>
|
|
</a>
|
|
}
|
|
</div>
|
|
</div>
|
|
}
|
|
</div>
|
|
|
|
@if (eventConfig) {
|
|
<div class="event-card-container w-100 d-flex justify-content-center">
|
|
<div id="event-details" class="event-card bg-white shadow rounded p-3 p-md-4 text-center">
|
|
@if (eventConfig.title) {
|
|
<h3 class="event-title text-primary fw-bold mb-3">{{ eventConfig.title }}</h3>
|
|
}
|
|
|
|
<div
|
|
class="event-details d-flex flex-column flex-md-row justify-content-center align-items-center gap-3 gap-md-5 text-muted"
|
|
>
|
|
@if (eventConfig.dates && eventConfig.dates.length > 0) {
|
|
<div class="d-flex align-items-center gap-2">
|
|
<i class="fa-regular fa-calendar event-icon"></i>
|
|
<span class="event-info-text">{{ formattedDates }}</span>
|
|
</div>
|
|
}
|
|
@if (eventConfig.location) {
|
|
<div class="d-flex align-items-center gap-2">
|
|
<i class="fa-solid fa-location-dot event-icon"></i>
|
|
<span class="event-info-text">{{ eventConfig.location }}</span>
|
|
</div>
|
|
}
|
|
</div>
|
|
|
|
@if (eventConfig.dates && eventConfig.dates.length > 0) {
|
|
<button
|
|
type="button"
|
|
class="event-schedule-toggle"
|
|
[attr.aria-expanded]="schedulesExpanded"
|
|
aria-controls="event-schedules"
|
|
(click)="toggleSchedules()"
|
|
>
|
|
<i
|
|
class="fa-solid"
|
|
[class.fa-chevron-down]="!schedulesExpanded"
|
|
[class.fa-chevron-up]="schedulesExpanded"
|
|
aria-hidden="true"
|
|
></i>
|
|
<span>{{ schedulesExpanded ? 'Ocultar horarios' : 'Ver horarios' }}</span>
|
|
</button>
|
|
|
|
@if (schedulesExpanded) {
|
|
<div id="event-schedules" class="event-schedules">
|
|
<table class="table table-striped table-borderless mb-0">
|
|
<tbody>
|
|
@for (eventDate of eventConfig.dates; track eventDate.id ?? eventDate.date) {
|
|
<tr>
|
|
<td>
|
|
<span class="event-schedule-value">
|
|
<i class="fa-regular fa-calendar" aria-hidden="true"></i>
|
|
<span>{{ formatScheduleDate(eventDate.date) }}</span>
|
|
</span>
|
|
</td>
|
|
<td>
|
|
<span class="event-schedule-value">
|
|
<i class="fa-regular fa-clock" aria-hidden="true"></i>
|
|
<span>
|
|
{{ formatScheduleTime(eventDate.start_time) }} -
|
|
{{ formatScheduleTime(eventDate.end_time) }}
|
|
</span>
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
}
|
|
}
|
|
</div>
|
|
</div>
|
|
}
|
|
</div>
|