<?php $__template->layout('Layout.main'); ?>
<?php $__template->section('title'); ?>حمام السباحة<?php $__template->endSection(); ?>

<?php $__template->section('page_actions'); ?>
<a href="/pool/config/create" class="btn btn-primary"><i data-lucide="plus" style="width:16px;height:16px;vertical-align:middle;margin-left:4px;"></i> إضافة حمام سباحة</a>
<a href="/pool/bookings" class="btn btn-outline"><i data-lucide="calendar" style="width:16px;height:16px;vertical-align:middle;margin-left:4px;"></i> جميع الحجوزات</a>
<?php $__template->endSection(); ?>

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

<?php if (!empty($pools)): ?>
<div style="display:grid;grid-template-columns:repeat(auto-fill, minmax(340px, 1fr));gap:20px;">
    <?php foreach ($pools as $p): ?>
    <div class="card" style="overflow:hidden;">
        <a href="/pool/<?= (int) $p['id'] ?>/grid" style="text-decoration:none;color:inherit;display:block;">
            <div style="padding:20px;display:flex;align-items:start;gap:15px;">
                <div style="width:56px;height:56px;border-radius:12px;background:linear-gradient(135deg, #0D737715, #0D737730);display:flex;align-items:center;justify-content:center;flex-shrink:0;">
                    <i data-lucide="waves" style="width:28px;height:28px;color:#0D7377;"></i>
                </div>
                <div style="flex:1;">
                    <h3 style="margin:0 0 6px;font-size:16px;font-weight:700;color:#1A1A2E;"><?= e($p['name_ar']) ?></h3>
                    <div style="display:flex;gap:12px;font-size:12px;color:#6B7280;">
                        <span><?= e($p['length_meters']) ?>م × <?= e($p['width_meters']) ?>م</span>
                        <span><?= (int) $p['total_lanes_lengthwise'] ?> حارة</span>
                        <span>حد أقصى: <?= (int) $p['max_total_swimmers'] ?> سبّاح</span>
                    </div>
                </div>
            </div>
            <div style="padding:0 20px 15px;display:flex;gap:10px;">
                <span class="btn btn-sm btn-primary" style="font-size:12px;padding:5px 12px;">
                    <i data-lucide="grid-3x3" style="width:13px;height:13px;vertical-align:middle;margin-left:3px;"></i> فتح الشبكة
                </span>
                <a href="/pool/<?= (int) $p['id'] ?>/book" class="btn btn-sm btn-outline" style="font-size:12px;padding:5px 12px;">
                    <i data-lucide="plus" style="width:13px;height:13px;vertical-align:middle;margin-left:3px;"></i> حجز
                </a>
            </div>
        </a>
    </div>
    <?php endforeach; ?>
</div>
<?php else: ?>
<div class="card" style="padding:60px 20px;text-align:center;">
    <i data-lucide="waves" style="width:48px;height:48px;color:#D1D5DB;margin-bottom:15px;"></i>
    <h3 style="color:#6B7280;margin:0 0 8px;">لا يوجد حمامات سباحة</h3>
    <p style="color:#9CA3AF;font-size:14px;margin:0 0 20px;">أضف مرفق من نوع "حمام سباحة" أولاً، ثم قم بتكوينه هنا.</p>
    <a href="/pool/config/create" class="btn btn-primary"><i data-lucide="plus" style="width:16px;height:16px;vertical-align:middle;margin-left:4px;"></i> إضافة تكوين</a>
</div>
<?php endif; ?>

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