<?php
/**
 * Step 2: Media Scan.
 *
 * @package CoffeeWP_Media_Cleanup
 */

defined( 'ABSPATH' ) || exit;
?>
<section class="cwpm-step" id="cwpm-step-scan" data-step="2">
	<h4 class="cwpm-step__title">
		<span class="badge badge-primary">2</span>
		<?php esc_html_e( 'Scan Media', 'coffeewp-media-cleanup' ); ?>
	</h4>
	<p class="cwpm-step__desc">
		<?php esc_html_e( 'Scan your uploads folder to find all media files, link them to database records, and check usage across your site.', 'coffeewp-media-cleanup' ); ?>
	</p>

	<div id="cwpm-scan-content">

		<!-- Scan controls -->
		<div class="cwpm-scan-controls" id="cwpm-scan-controls">
			<div class="cwpm-scan-cards" id="cwpm-scan-cards">
				<!-- New Scan card — always visible -->
				<button type="button" class="card card-vertical cwpm-scan-card" id="cwpm-card-new-scan" data-color="blue">
					<div class="card-body">
						<span class="cwpm-scan-card__icon" aria-hidden="true"><i
								class="fa-solid fa-magnifying-glass"></i></span>
						<span
							class="cwpm-scan-card__label"><?php esc_html_e( 'New Scan', 'coffeewp-media-cleanup' ); ?></span>
					</div>
				</button>
				<!-- Last Scan card — shown only when a completed scan exists -->
				<button type="button" class="card card-vertical cwpm-scan-card" id="cwpm-card-last-scan"
					data-color="green" style="display: none;">
					<div class="card-body">
						<span class="cwpm-scan-card__icon" aria-hidden="true"><i
								class="fa-solid fa-clock-rotate-left"></i></span>
						<span
							class="cwpm-scan-card__label"><?php esc_html_e( 'Last Scan Results', 'coffeewp-media-cleanup' ); ?></span>
						<span class="cwpm-scan-card__date" id="cwpm-last-scan-date"></span>
					</div>
				</button>
				<!-- Resume Scan card — shown only when an interrupted/in-progress scan exists -->
				<button type="button" class="card card-vertical cwpm-scan-card" id="cwpm-card-resume-scan"
					data-color="amber" style="display: none;">
					<div class="card-body">
						<span class="cwpm-scan-card__icon" aria-hidden="true"><i class="fa-solid fa-play"></i></span>
						<span
							class="cwpm-scan-card__label"><?php esc_html_e( 'Resume Scan', 'coffeewp-media-cleanup' ); ?></span>
						<span class="cwpm-scan-card__date" id="cwpm-resume-scan-info"></span>
					</div>
				</button>
			</div>
		</div>

		<!-- Progress (hidden until scan starts) -->
		<div class="cwpm-scan-progress" id="cwpm-scan-progress" style="display: none;">
			<div class="cwpm-progress">
				<div class="cwpm-progress__bar" id="cwpm-progress-bar" style="width: 0%;"></div>
			</div>
			<div class="cwpm-scan-progress__footer">
				<p class="cwpm-scan-progress__status" id="cwpm-scan-status">
					<?php esc_html_e( 'Preparing scan...', 'coffeewp-media-cleanup' ); ?>
				</p>
	</div>
			<div class="cwpm-scan-progress__actions">
				<button type="button" class="btn btn--secondary" id="cwpm-stop-scan">
					<span class="icon icon--lg" aria-hidden="true"><i class="fa-solid fa-stop"></i></span>
					<?php esc_html_e( 'Stop', 'coffeewp-media-cleanup' ); ?>
				</button>
			</div>
		</div>

	</div>
</section>
