<form action="/guestbook/clean" method="post">
    <input type="hidden" name="csrf_token" value="<?= $csrf_token ?>">
    
    <!-- Modal Header -->
    <div class="flex items-center justify-between p-6 border-b border-gray-200">
        <h3 class="text-lg font-semibold text-gray-900">
            <?= __('Clear guestbook') ?>
        </h3>
        <button type="button" class="p-2 text-gray-400 hover:text-gray-600 transition-colors duration-200" data-dismiss="modal" aria-label="Close">
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
            </svg>
        </button>
    </div>

    <!-- Modal Body -->
    <div class="p-6">
        <p class="text-gray-700 mb-4"><?= __('Clearing parameters') ?></p>
        
        <div class="space-y-3">
            <!-- Option 1: Older than 1 week -->
            <div class="flex items-center">
                <input type="radio" 
                       id="week" 
                       name="cl" 
                       value="0" 
                       class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500 focus:ring-2"
                       checked>
                <label for="week" class="ml-2 text-sm font-medium text-gray-700 cursor-pointer">
                    <?= __('Older than 1 week') ?>
                </label>
            </div>

            <!-- Option 2: Older than 1 day -->
            <div class="flex items-center">
                <input type="radio" 
                       id="day" 
                       name="cl" 
                       value="1" 
                       class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500 focus:ring-2">
                <label for="day" class="ml-2 text-sm font-medium text-gray-700 cursor-pointer">
                    <?= __('Older than 1 day') ?>
                </label>
            </div>

            <!-- Option 3: Clear all -->
            <div class="flex items-center">
                <input type="radio" 
                       id="all" 
                       name="cl" 
                       value="2" 
                       class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500 focus:ring-2">
                <label for="all" class="ml-2 text-sm font-medium text-gray-700 cursor-pointer">
                    <?= __('Clear all') ?>
                </label>
            </div>
        </div>

        <!-- Warning Message -->
        <div class="mt-4 p-3 bg-yellow-50 border border-yellow-200 rounded-lg">
            <div class="flex items-center">
                <svg class="w-5 h-5 text-yellow-600 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
                </svg>
                <span class="text-sm text-yellow-800"><?= __('This action cannot be undone') ?></span>
            </div>
        </div>
    </div>

    <!-- Modal Footer -->
    <div class="flex items-center justify-end space-x-3 p-6 border-t border-gray-200 bg-gray-50 rounded-b-lg">
        <button type="button" 
                data-dismiss="modal" 
                aria-label="Close" 
                class="px-4 py-2 text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors duration-200 font-medium">
            <?= __('Cancel') ?>
        </button>
        <button type="submit" 
                class="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors duration-200 font-medium">
            <?= __('Clear') ?>
        </button>
    </div>
</form>