<div class="container-fluid py-4">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h4 class="fw-bold mb-1"><i class="fa-solid fa-book-open-reader text-primary me-2"></i>Training Library</h4>
            <p class="text-muted mb-0">Standard operating procedure (SOP) modules, safety videos &amp; hygiene guidelines for staff.</p>
        </div>
        <a href="<?php echo base_url('admin/add_training'); ?>" class="btn btn-primary">
            <i class="fa-solid fa-plus me-1"></i> Add Training Material
        </a>
    </div>

    <div class="row g-4">
        <div class="col-md-6 col-xl-4">
            <div class="card border-0 shadow-sm rounded-4 h-100">
                <div class="card-body p-4">
                    <span class="badge bg-primary bg-opacity-10 text-primary mb-2">Hygiene &amp; Cleanliness</span>
                    <h5 class="fw-bold text-dark mb-2">Kitchen Walkthrough &amp; Disinfection Standards</h5>
                    <p class="text-muted small">Standard procedures for cleaning countertops, sanitizing utensils, and recording walkthrough video evidence.</p>
                    <div class="d-flex justify-content-between align-items-center small border-top pt-3 text-muted">
                        <span><i class="fa-solid fa-file-video text-primary me-1"></i> Video Module (5 mins)</span>
                        <span class="badge bg-success bg-opacity-10 text-success">Active</span>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-md-6 col-xl-4">
            <div class="card border-0 shadow-sm rounded-4 h-100">
                <div class="card-body p-4">
                    <span class="badge bg-warning bg-opacity-10 text-warning mb-2">Food Prep SOP</span>
                    <h5 class="fw-bold text-dark mb-2">Toppings Area &amp; Cold Storage Protocol</h5>
                    <p class="text-muted small">Temperature logging requirements, storage container labeling, and freshness verification guidelines.</p>
                    <div class="d-flex justify-content-between align-items-center small border-top pt-3 text-muted">
                        <span><i class="fa-solid fa-file-pdf text-danger me-1"></i> PDF Guide</span>
                        <span class="badge bg-success bg-opacity-10 text-success">Active</span>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-md-6 col-xl-4">
            <div class="card border-0 shadow-sm rounded-4 h-100">
                <div class="card-body p-4">
                    <span class="badge bg-info bg-opacity-10 text-info mb-2">Safety &amp; Compliance</span>
                    <h5 class="fw-bold text-dark mb-2">Emergency Protocols &amp; Fire Safety Routine</h5>
                    <p class="text-muted small">Exit pathway verification, extinguisher inspections, and first aid box compliance checklists.</p>
                    <div class="d-flex justify-content-between align-items-center small border-top pt-3 text-muted">
                        <span><i class="fa-solid fa-graduation-cap text-info me-1"></i> Interactive Checklist</span>
                        <span class="badge bg-success bg-opacity-10 text-success">Active</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
