<?php

$title = 'Homepage Visual Designer';

$sections =
    $sections ?? [];

?>

<div class="container py-5">

<h2 class="fw-bold mb-5">

<i class="fa fa-palette"></i>

Homepage Visual Designer

</h2>

<div class="row g-4">

<?php foreach($sections as $s): ?>

<div class="col-lg-6">

<div class="card border-0 shadow-lg rounded-4 overflow-hidden h-100">

<div class="card-body p-4">

<div class="d-flex justify-content-between align-items-start mb-4">

<div>

<h3 class="fw-bold mb-2">

<i class="fa <?= htmlspecialchars(
(string)(
$s['icon_class']
?? 'fa-layer-group'
)
) ?>"></i>

<?= htmlspecialchars(
(string)(
$s['section_title_en']
?? $s['section_key']
)
) ?>

</h3>

<div class="text-muted">

<?= htmlspecialchars(
(string)(
$s['section_title_ar']
?? ''
)
) ?>

</div>

</div>

<span class="badge bg-<?=
($s['enabled'] ?? 0)
? 'success'
: 'secondary'
?>">

<?=
($s['enabled'] ?? 0)
? 'Enabled'
: 'Disabled'
?>

</span>

</div>

<div class="mb-3">

<label class="form-label fw-bold">
Theme
</label>

<div class="small text-muted">

<?= htmlspecialchars(
(string)(
$s['theme_name']
?? 'enterprise-gradient'
)
) ?>

</div>

</div>

<div class="mb-3">

<label class="form-label fw-bold">
Background Type
</label>

<div class="small text-muted">

<?= htmlspecialchars(
(string)(
$s['background_type']
?? 'gradient'
)
) ?>

</div>

</div>

<div class="mb-3">

<label class="form-label fw-bold">
Custom CSS
</label>

<div class="small text-muted text-break">

<?= htmlspecialchars(
(string)(
$s['custom_css_class']
?? ''
)
) ?>

</div>

</div>

<?php if(!empty($s['background_image'])): ?>

<div class="rounded-4 overflow-hidden mt-4">

<img
src="/easychair/<?= htmlspecialchars(
(string)$s['background_image']
) ?>"
class="img-fluid w-100"
style="
height:180px;
object-fit:cover;
">

</div>

<?php endif; ?>

</div>

</div>

</div>

<?php endforeach; ?>

</div>

</div>
