<main role="main" class="col-md-9 ml-sm-auto col-lg-10 px-md-4">
    <div
        class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
        <h1 class="h2">Teachers</h1>
        <a href="/register" class="btn btn-primary">Add New Teacher</a>
    </div>
    <table id="myTable" class="display">
        <thead>
            <tr>
                <th>ID</th>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Phone</th>
                <th>Email</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody>
            <?php foreach ($teachers as $teacher): ?>
                <tr>
                    <td><?php echo $teacher['id']; ?></td>
                    <td><?php echo $teacher['firstname']; ?></td>
                    <td><?php echo $teacher['lastname']; ?></td>
                    <td><?php echo $teacher['cellphone']; ?></td>
                    <td><?php echo $teacher['email']; ?></td>
                    <td>
                        <a href="teacher/edit/<?php echo $teacher['id']; ?>" class="btn btn-warning">Edit</a>
                        <a href="teacher/delete/<?php echo $teacher['id']; ?>" class="btn btn-danger"
                            onclick="return confirm('Are you sure you want to delete this teacher?');">Delete</a>
                    </td>
                </tr>
            <?php endforeach; ?>
        </tbody>
    </table>
</main>

<?= $this->section('scripts') ?>
<script>
$(document).ready(function() {
    $('#myTable').DataTable();
});
</script>
<?= $this->endSection() ?>