<?php $__template->layout('Layout.main'); ?>
<?php $__template->section('title'); ?>المرايا - حالة المرافق<?php $__template->endSection(); ?>

<?php $__template->section('content'); ?>

<div style="display:grid;grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));gap:15px;">
    <?php if (!empty($facilities)): ?>
    <?php foreach ($facilities as $f): ?>
    <a href="/sa/mirror/<?= (int) $f['id'] ?>" class="card" style="padding:20px;text-decoration:none;color:inherit;transition:box-shadow 0.2s;border-right:4px solid #3B82F6;">
        <div style="display:flex;align-items:center;gap:12px;">
            <div style="width:44px;height:44px;background:#DBEAFE;border-radius:10px;display:flex;align-items:center;justify-content:center;">
                <i data-lucide="monitor" style="width:22px;height:22px;color:#3B82F6;"></i>
            </div>
            <div>
                <div style="font-weight:700;font-size:15px;"><?= e($f['name_ar'] ?? '') ?></div>
                <?php
                $typeLabels = ['pool' => 'حمام سباحة', 'court' => 'ملعب', 'pitch' => 'ملعب كبير', 'gym' => 'صالة رياضية', 'track' => 'مضمار', 'multipurpose' => 'متعدد'];
                ?>
                <div style="font-size:12px;color:#6B7280;"><?= e($typeLabels[$f['facility_type'] ?? ''] ?? '') ?></div>
            </div>
        </div>
    </a>
    <?php endforeach; ?>
    <?php else: ?>
    <div class="card" style="padding:40px;text-align:center;color:#6B7280;grid-column:1/-1;">
        <i data-lucide="monitor" style="width:36px;height:36px;color:#D1D5DB;display:block;margin:0 auto 10px;"></i>
        لا توجد مرافق نشطة
    </div>
    <?php endif; ?>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    if (typeof lucide !== 'undefined') { lucide.createIcons(); }
});
</script>
<?php $__template->endSection(); ?>
