<div class="container-fluid">
	<div class="row column_title">
		<div class="col-md-12">
			<div class="page_title">
				<h2>Chapters</h2>
			</div>
		</div>
	</div>

	<div class="mb-3">
		<a class="btn btn-secondary" href="<?= base_url('courses/show/' . $courseId) ?>">Back to Course</a>
		<a class="btn btn-primary float-right" href="<?= base_url('episodes/create/' . $courseId) ?>">Add Chapter</a>
	</div>

	<div class="card shadow mb-4">
		<div class="card-body">
			<div class="table-responsive">
				<table class="table table-bordered" width="100%" cellspacing="0">
					<thead class="thead-dark">
						<tr>
							<th>Title</th>
							<th>Time</th>
							<th>Sets</th>
							<th>Length</th>
							<th>Duration</th>
							<th>Video</th>
							<th>Actions</th>
						</tr>
					</thead>
					<tbody>
					<?php if (!empty($episodes)) { ?>
						<?php foreach ($episodes as $id => $ep) { ?>
							<tr>
								<td><?= isset($ep['title']) ? html_escape((string)$ep['title']) : '' ?></td>
								<td><?= isset($ep['time']) ? html_escape((string)$ep['time']) : '' ?></td>
								<td><?= isset($ep['sets']) ? html_escape((string)$ep['sets']) : '' ?></td>
								<td><?= isset($ep['length']) ? html_escape((string)$ep['length']) : '' ?></td>
								<td><?= isset($ep['duration']) ? (float)$ep['duration'] : 0 ?></td>
								<td>
									<?php if (!empty($ep['videoUri'])) { ?>
										<a class="btn btn-sm btn-outline-info" target="_blank" href="<?= html_escape((string)$ep['videoUri']) ?>">Open</a>
									<?php } ?>
								</td>
								<td style="width: 200px;">
									<a class="btn btn-info btn-sm" href="<?= base_url('episodes/edit/' . $courseId . '/' . $id) ?>">Edit</a>
									<a class="btn btn-danger btn-sm" href="<?= base_url('episodes/delete/' . $courseId . '/' . $id) ?>" onclick="return confirm('Delete this episode?')">Delete</a>
								</td>
							</tr>
						<?php } ?>
					<?php } else { ?>
						<tr>
							<td colspan="7" class="text-center">No chapters found.</td>
						</tr>
					<?php } ?>
					</tbody>
				</table>
			</div>
		</div>
	</div>
</div>

