<?php
/**
 * Status Modal Template
 * 
 * Displays a dynamic modal showing status breakdown with missing items.
 * Appears on hover over elements with data-status-type attribute.
 * 
 * CSS and JavaScript are enqueued separately via class-bootstrap.php
 * 
 * @since 2.1.0
 * @since 2.1.2
 * @package VMPFence
 * @subpackage StatusModal
 */

if (!defined('ABSPATH')) {
    exit;
}
?>

<!-- Status Tooltip Modal Template -->
<div id="vmpfence-status-modal" class="vmpfence-status-modal" style="display: none;">
    <div class="vmpfence-modal-content">
        <div class="vmpfence-modal-header">
            <h4 id="vmpfence-modal-title">Status</h4>
        </div>
        <div class="vmpfence-modal-body">
            <div class="vmpfence-modal-circle-container">
                <div id="vmpfence-modal-circle" class="vmpfence-modal-circle">
                    <svg width="100" height="100">
                        <circle cx="50" cy="50" r="45" stroke="#ececec" stroke-width="8" fill="none"/>
                        <circle id="vmpfence-modal-progress" cx="50" cy="50" r="45" stroke="#fcb214" stroke-width="8" fill="none"
                                stroke-dasharray="283" stroke-dashoffset="283" 
                                transform="rotate(-90 50 50)" stroke-linecap="round"/>
                    </svg>
                    <div id="vmpfence-modal-percentage" class="vmpfence-modal-percentage-text">0%</div>
                </div>
            </div>
            <div class="vmpfence-modal-info">
                <div id="vmpfence-modal-complete" class="vmpfence-modal-complete" style="display: none;">
                    <!-- <p><strong>Congratulations!</strong> You've optimized configurations for this feature! If you want to learn more about how this score is determined, click the link below.</p> -->
                     <p><strong>Congratulations!</strong> You've optimized all configurations for this feature!<br>
                     Your site is fully protected with the best security settings.</p>
                </div>
                <div id="vmpfence-modal-incomplete" class="vmpfence-modal-incomplete">
                    <h4>How do I get to 100%?</h4>
                    <ul id="vmpfence-modal-list" class="vmpfence-status-list">
                        <!-- Dynamic list items will be inserted here -->
                    </ul>
                </div>
                <p class="vmpfence-modal-help">
                    <!-- <a href="#" id="vmpfence-modal-help-link" target="_blank" rel="noopener noreferrer">
                        How does VMPFence determine this?
                    </a> -->
                </p>
            </div>
        </div>
    </div>
</div>
