{% extends "base.html" %}

{% block title %}Accessibility Testing - Project Ploughshares{% endblock %}

{% block content %}
<div class="container">
    <h1>Accessibility Testing Page</h1>
    <p class="lead">This page demonstrates the accessible components and allows for easy testing of accessibility features.</p>

    <div class="alert alert-info" role="alert">
        <strong>New!</strong> Click the "Contrast Checker" button in the bottom right corner to test color contrast ratios.
    </div>

    <section class="mb-5">
        <h2>Color Contrast</h2>
        <div class="row">
            <div class="col-md-6">
                <div class="card mb-3">
                    <div class="card-header">
                        <h3 class="h5 mb-0">Text on Background Colors</h3>
                    </div>
                    <div class="card-body">
                        <p>Regular text on white background (Default)</p>
                        <p style="background-color: var(--ploughshares-blue); color: white; padding: 10px;">White text on Ploughshares blue</p>
                        <p style="background-color: var(--ploughshares-dark-blue); color: white; padding: 10px;">White text on Ploughshares dark blue</p>
                        <p style="background-color: var(--ploughshares-light-blue); color: black; padding: 10px;">Black text on Ploughshares light blue</p>
                        <p style="background-color: var(--ploughshares-accent); color: black; padding: 10px;">Black text on Ploughshares accent</p>
                        <p style="background-color: var(--success-color); color: white; padding: 10px;">White text on success color</p>
                        <p style="background-color: var(--warning-color); color: white; padding: 10px;">White text on warning color</p>
                        <p style="background-color: var(--error-color); color: white; padding: 10px;">White text on error color</p>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="card mb-3">
                    <div class="card-header">
                        <h3 class="h5 mb-0">Interactive Elements</h3>
                    </div>
                    <div class="card-body">
                        <p><a href="#">This is a regular link</a></p>
                        <p><a href="#" class="btn btn-primary">Primary Button</a></p>
                        <p><a href="#" class="btn btn-success">Success Button</a></p>
                        <p><a href="#" class="btn btn-warning">Warning Button</a></p>
                        <p><a href="#" class="btn btn-info">Info Button</a></p>
                        <p><a href="#" class="btn btn-danger">Danger Button</a></p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="mb-5">
        <h2>Keyboard Navigation</h2>
        <div class="card mb-3">
            <div class="card-header">
                <h3 class="h5 mb-0">Focus States</h3>
            </div>
            <div class="card-body">
                <p>Tab through these elements to test focus visibility:</p>
                <div class="d-flex flex-wrap gap-2 mb-3">
                    <a href="#" class="btn btn-primary">Button 1</a>
                    <a href="#" class="btn btn-primary">Button 2</a>
                    <a href="#" class="btn btn-primary">Button 3</a>
                </div>
                <div class="mb-3">
                    <label for="test-input" class="form-label">Test Input</label>
                    <input type="text" class="form-control" id="test-input" placeholder="Focus me">
                </div>
                <div class="mb-3">
                    <label for="test-select" class="form-label">Test Select</label>
                    <select class="form-select" id="test-select">
                        <option>Option 1</option>
                        <option>Option 2</option>
                        <option>Option 3</option>
                    </select>
                </div>
            </div>
        </div>
    </section>

    <section class="mb-5">
        <h2>Form Controls</h2>
        <div class="card mb-3">
            <div class="card-header">
                <h3 class="h5 mb-0">Accessible Form</h3>
            </div>
            <div class="card-body">
                <form>
                    <div class="mb-3">
                        <label for="name" class="form-label">Name</label>
                        <input type="text" class="form-control" id="name" aria-describedby="nameHelp">
                        <div id="nameHelp" class="form-text">Enter your full name.</div>
                    </div>
                    <div class="mb-3">
                        <label for="email" class="form-label">Email address</label>
                        <input type="email" class="form-control" id="email" aria-describedby="emailHelp">
                        <div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
                    </div>
                    <div class="mb-3">
                        <label for="message" class="form-label">Message</label>
                        <textarea class="form-control" id="message" rows="3"></textarea>
                    </div>
                    <div class="mb-3 form-check">
                        <input type="checkbox" class="form-check-input" id="exampleCheck1">
                        <label class="form-check-label" for="exampleCheck1">Check me out</label>
                    </div>
                    <button type="submit" class="btn btn-primary">Submit</button>
                </form>
            </div>
        </div>
    </section>

    <section class="mb-5">
        <h2>Tables</h2>
        <div class="card mb-3">
            <div class="card-header">
                <h3 class="h5 mb-0">Accessible Table</h3>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table">
                        <caption>Sample transactions data</caption>
                        <thead>
                            <tr>
                                <th scope="col">#</th>
                                <th scope="col">Transaction</th>
                                <th scope="col">Date</th>
                                <th scope="col" class="amount-cell">Amount</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <th scope="row">1</th>
                                <td>Equipment Purchase</td>
                                <td>2023-01-15</td>
                                <td class="amount-cell currency-value">$1,200.00</td>
                            </tr>
                            <tr>
                                <th scope="row">2</th>
                                <td>Consulting Services</td>
                                <td>2023-02-28</td>
                                <td class="amount-cell currency-value">$3,500.00</td>
                            </tr>
                            <tr>
                                <th scope="row">3</th>
                                <td>Software License</td>
                                <td>2023-03-10</td>
                                <td class="amount-cell currency-value">$950.00</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </section>

    <section class="mb-5">
        <h2>Icons and Images</h2>
        <div class="card mb-3">
            <div class="card-header">
                <h3 class="h5 mb-0">Accessible Icons</h3>
            </div>
            <div class="card-body">
                <p>Icons with proper alternative text:</p>
                <div class="d-flex flex-wrap gap-3">
                    <button class="btn btn-primary">
                        <i class="bi bi-plus-circle" aria-hidden="true"></i> Add
                    </button>
                    <button class="btn btn-info">
                        <i class="bi bi-pencil" aria-hidden="true"></i> Edit
                    </button>
                    <button class="btn btn-danger">
                        <i class="bi bi-trash" aria-hidden="true"></i> Delete
                    </button>
                    <button class="btn btn-secondary">
                        <i class="bi bi-eye" aria-hidden="true"></i> View
                    </button>
                </div>
                
                <p class="mt-4">Icon-only buttons with aria-label:</p>
                <div class="d-flex flex-wrap gap-3">
                    <button class="btn btn-primary" aria-label="Add item">
                        <i class="bi bi-plus-circle" aria-hidden="true"></i>
                    </button>
                    <button class="btn btn-info" aria-label="Edit item">
                        <i class="bi bi-pencil" aria-hidden="true"></i>
                    </button>
                    <button class="btn btn-danger" aria-label="Delete item">
                        <i class="bi bi-trash" aria-hidden="true"></i>
                    </button>
                    <button class="btn btn-secondary" aria-label="View item">
                        <i class="bi bi-eye" aria-hidden="true"></i>
                    </button>
                </div>
            </div>
        </div>
    </section>

    <section class="mb-5">
        <h2>Text Sizing</h2>
        <div class="card mb-3">
            <div class="card-header">
                <h3 class="h5 mb-0">Text Hierarchy</h3>
            </div>
            <div class="card-body">
                <h1>Heading Level 1</h1>
                <h2>Heading Level 2</h2>
                <h3>Heading Level 3</h3>
                <h4>Heading Level 4</h4>
                <h5>Heading Level 5</h5>
                <h6>Heading Level 6</h6>
                <p>This is regular paragraph text. The base font size is set to 16px for optimal readability.</p>
                <p class="lead">This is a lead paragraph with slightly larger text.</p>
                <p><small>This is smaller text, still maintaining readability.</small></p>
            </div>
        </div>
    </section>
</div>
{% endblock %}

{% block scripts %}
<script src="{{ url_for('static', filename='js/contrast-checker.js') }}"></script>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Add a message when the skip link is used
        const skipLink = document.querySelector('.skip-link');
        if (skipLink) {
            skipLink.addEventListener('click', function() {
                const alertDiv = document.createElement('div');
                alertDiv.className = 'alert alert-success alert-dismissible fade show';
                alertDiv.setAttribute('role', 'alert');
                alertDiv.innerHTML = 'Skip link used successfully! This alert is for demonstration purposes.';
                
                const closeButton = document.createElement('button');
                closeButton.className = 'btn-close';
                closeButton.setAttribute('type', 'button');
                closeButton.setAttribute('data-bs-dismiss', 'alert');
                closeButton.setAttribute('aria-label', 'Close');
                
                alertDiv.appendChild(closeButton);
                
                const contentDiv = document.querySelector('.content');
                contentDiv.insertBefore(alertDiv, contentDiv.firstChild);
            });
        }
    });
</script>
{% endblock %}