<div class="whp-ai-monitor">

    {if $error}
        <div class="alert alert-danger">
            <i class="fa fa-exclamation-triangle"></i> {$error}
        </div>
    {/if}

    <div class="row">
        {* Monitoring Status Card *}
        <div class="col-sm-6 col-md-4">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title"><i class="fa fa-heartbeat"></i> Monitoring Status</h3>
                </div>
                <div class="panel-body text-center">
                    {if $monitoring_status == 'active'}
                        <span class="label label-success" style="font-size: 16px; padding: 8px 16px;">
                            <i class="fa fa-check-circle"></i> Active
                        </span>
                    {elseif $monitoring_status == 'inactive'}
                        <span class="label label-default" style="font-size: 16px; padding: 8px 16px;">
                            <i class="fa fa-pause-circle"></i> Inactive
                        </span>
                    {else}
                        <span class="label label-warning" style="font-size: 16px; padding: 8px 16px;">
                            <i class="fa fa-question-circle"></i> Unknown
                        </span>
                    {/if}
                    {if $site_name}
                        <p class="text-muted" style="margin-top: 12px; margin-bottom: 0;">
                            <i class="fa fa-globe"></i> {$site_name}
                        </p>
                    {/if}
                </div>
            </div>
        </div>

        {* Issues Summary Card *}
        <div class="col-sm-6 col-md-4">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title"><i class="fa fa-exclamation-circle"></i> Recent Issues</h3>
                </div>
                <div class="panel-body">
                    <div class="text-center" style="margin-bottom: 10px;">
                        <span style="font-size: 36px; font-weight: bold; color: {if $issue_count > 0}#d9534f{else}#5cb85c{/if};">
                            {$issue_count}
                        </span>
                        <br>
                        <span class="text-muted">total issues detected</span>
                    </div>
                    {if $issue_count > 0}
                        <ul class="list-unstyled" style="margin-bottom: 0;">
                            {if $critical_count > 0}
                                <li>
                                    <span class="label label-danger">{$critical_count}</span>
                                    Critical
                                </li>
                            {/if}
                            {if $warning_count > 0}
                                <li style="margin-top: 4px;">
                                    <span class="label label-warning">{$warning_count}</span>
                                    Warning
                                </li>
                            {/if}
                            {if $info_count > 0}
                                <li style="margin-top: 4px;">
                                    <span class="label label-info">{$info_count}</span>
                                    Informational
                                </li>
                            {/if}
                        </ul>
                    {else}
                        <p class="text-success text-center" style="margin-bottom: 0;">
                            <i class="fa fa-check"></i> No issues detected
                        </p>
                    {/if}
                </div>
            </div>
        </div>

        {* Details Card *}
        <div class="col-sm-12 col-md-4">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title"><i class="fa fa-info-circle"></i> Details</h3>
                </div>
                <div class="panel-body">
                    <dl class="dl-horizontal" style="margin-bottom: 0;">
                        <dt>Last Scan</dt>
                        <dd>{$last_scan}</dd>
                        {if $notification_email}
                            <dt>Notifications</dt>
                            <dd>{$notification_email}</dd>
                        {/if}
                    </dl>
                </div>
            </div>
        </div>
    </div>

    {* Dashboard Link *}
    {if $dashboard_url && $monitoring_status == 'active'}
        <div class="text-center" style="margin-top: 10px;">
            <a href="{$dashboard_url}" target="_blank" class="btn btn-primary btn-lg">
                <i class="fa fa-external-link"></i> View Full Dashboard
            </a>
        </div>
    {/if}

</div>
