<?php
namespace ONLINE_ADAv4;

use ONLINE_ADAv4\Helper;
use ONLINE_ADAv4\Plugin;
?>


<div class="wrap">
	<h1><?php echo wp_kses(get_admin_page_title(),wp_kses_allowed_html()); ?></h1>
	<div class="wcag-main">
        <div class="wcag-header">
            <div>
                <p>Below is the list of WCAG 2.1 requirements for digital accessibility. This list covers level A and AA requirements. AAA, the highest rating, is not included because it's not a legal requirement yet. Included below are the exact WCAG requirements, notes on how the audit will help, and helpful tips.</p>
                <p>Click Here to see the complete WCAG 2.1 checklist and guide: <a target="_blank" title="WCAG 2.1 quick reference guide" rel="external" href="https://www.w3.org/WAI/WCAG20/quickref/">WCAG 2.1 Quick Reference Guide</a> on the <a href="https://www.w3.org/WAI" target="_blank" rel="external">Web Accessibility Initiative (WAI)</a> homepage</p>
            </div>
            <div class="wcag-sidebar">
                <div class="wcag-widget wcag-limelight">
                    <p><strong><abbr title="Americans with Disabilities Act">Ability, Inc</abbr> Accessibility Tool</strong></p>
                    <p>
                        <a href="<?php echo esc_attr(admin_url('post-new.php?post_type=wcag_scan')); ?>" class="button button-primary">New Audit</a>
                        <a href="<?php echo esc_attr(admin_url('edit.php?post_type=wcag_scan')); ?>" class="button button-secondary">Audit Results</a>
                    </p>
                </div>
            </div>
        </div>

		<div class="wcag-content">
			<dl class="wcag-list">
                <?php foreach (Helper::getWcagArticlesModel() AS $article) : ?>
                    <div class="principle-heading"><?php echo wp_kses($article["principle_heading"],wp_kses_allowed_html()); ?></div>
                    <div class="principle-subheading"><?php echo wp_kses($article["principle_sub_heading"],wp_kses_allowed_html()); ?></div>
                        <?php foreach ($article["principle_guidelines"] AS $guideline) { ?>
                            <div class="guideline-wrap">
                                <div class="guideline-heading"><?php echo wp_kses($guideline["heading"],wp_kses_allowed_html()); ?></div>
                                <div class="guideline-sub-heading"><?php echo wp_kses($guideline["subheading"],wp_kses_allowed_html()); ?></div>
                                <?php foreach ($guideline["level"] AS $level => $value) { ?>
                                    <?php if (!empty($value)) : ?>
                                        <?php foreach ($value AS $index => $data) { ?>
                                            <dl>
                                                <dt id="<?php echo wp_kses($index,wp_kses_allowed_html()); ?>" class="checklist-article-number">
													<a href="<?php echo esc_url($data['url']); ?>" target="_blank" rel="external" ><?php echo wp_kses($index .
													" " . $data['title'],wp_kses_allowed_html()) . " <span class='checklist-level'>Level " . wp_kses($level,wp_kses_allowed_html()) . "</span>"; ?></a>
                                                    )
                                                </dt>
                                                <dd>
                                                    <div>
                                                        <div class="left">
                                                            <blockquote class="checklist-title">
                                                                <div class="quotes" ><?php echo wp_kses($data['message'],wp_kses_allowed_html()); ?></div>
                                                            </blockquote>
                                                            <?php if (!empty($data["tip"])) : ?>
                                                                <div class="wcag-wp-desc">
                                                                    <?php echo "Tip: " . wp_kses($data['tip'],wp_kses_allowed_html()); ?>
                                                                </div>
                                                            <?php endif ?>
                                                        </div>
                                                        <div class="right">
                                                            <?php if( $level == "AA" ): ?>
                                                                <?php if ( Helper::is_pro() ): ?>
                                                                    <a href="#" data-article="<?php echo esc_attr($index); ?>" class="available play-video">
                                                                        <i class="far fa-play-circle"></i>
                                                                        <div>Watch the video</div>
                                                                    </a>
                                                                    <div data-article="<?php echo esc_attr($index); ?>" class="not-available">
                                                                        <i class="fas fa-ban"></i>
                                                                        <div>Video not available</div>
                                                                    </div>
                                                                <?php else: ?>
                                                                    <a target="_blank" href="https://adaplugin.com/purchase/" data-article="<?php echo esc_attr($index); ?>" class="available upgrade-to-pro">
                                                                        <i class="fas fa-lock"></i>
                                                                        <div>Upgrade to pro</div>
                                                                    </a>
                                                                    <div data-article="<?php echo esc_attr($index); ?>" class="not-available">
                                                                        <i class="fas fa-ban"></i>
                                                                        <div>Video not available</div>
                                                                    </div>
                                                                <?php endif; ?>
                                                            <?php else: ?>
                                                                <a href="#" data-article="<?php echo esc_attr($index); ?>" class="available play-video">
                                                                    <i class="far fa-play-circle"></i>
                                                                    <div>Watch the video</div>
                                                                </a>
                                                                <div data-article="<?php echo esc_attr($index); ?>" class="not-available">
                                                                    <i class="fas fa-ban"></i>
                                                                    <div>Video not available</div>
                                                                </div>
                                                            <?php endif; ?>
                                                        </div>
                                                    </div>
                                                </dd>
                                            </dl>
                                        <?php
										} ?>
                                    <?php endif ?>
                                <?php
								} ?>
                            </div>
                        <?php
					} ?>

                <?php endforeach ?>

            </dl>

			<div class="wcag-footnotes">
				<h3>Disclaimer:</h3>
				<ul class="ul-disc">
					<li><strong>Third Party Plugins:</strong> Some plugins, especially those which do not follow WordPress standards or avoid WordPress API's, are not be accounted for by the accessibility auditing plugin. </li>
					<li><strong>"Hard-Coded" Markup:</strong> Plugins and themes that included "hard-coded" markup will not be accounted for during audits. This includes files that have markup that is directly included by template files, and are not editable within the dashboard.</li>
				</ul>
            </div>
            <div class="player-modal-wrap">
                <div id="player-modal">
                    <div class="top embed">
                        
                        <button aria-label="Close modal" class="close"><i class="fas fa-times"></i></button>
                    </div>
                    <div class="bottom">
                        <div class="description">
                        </div>
                        <button class="close mobile">Close Video</button>
                    </div>
                </div>
		    </div>
		</div>
	</div>
</div>