@extends('layouts.app')

@section('title', __('app.nav_accessibility'))

@section('content')
    <div class="page-head">
        <div>
            <h1>{{ __('app.a11y_title') }}</h1>
            <p class="muted">{{ __('app.a11y_intro') }}</p>
        </div>
    </div>

    <div class="grid grid-2">
        <section class="card" aria-labelledby="features-h">
            <h2 id="features-h">{{ __('app.a11y_features') }}</h2>
            <ul>
                @foreach(__('app.a11y_feature_list') as $feature)
                    <li style="margin-bottom:8px">{{ $feature }}</li>
                @endforeach
            </ul>
        </section>

        <div class="stack">
            <section class="card" aria-labelledby="keys-h">
                <h2 id="keys-h">{{ __('app.keyboard_shortcuts') }}</h2>
                <table>
                    <caption class="sr-only">{{ __('app.keyboard_shortcuts') }}</caption>
                    <thead><tr><th scope="col">{{ __('app.key') }}</th><th scope="col">{{ __('app.action') }}</th></tr></thead>
                    <tbody>
                    <tr><td><kbd>Tab</kbd></td><td>{{ __('app.key_tab') }}</td></tr>
                    <tr><td><kbd>Space</kbd></td><td>{{ __('app.play') }} / {{ __('app.pause') }}</td></tr>
                    <tr><td><kbd>N</kbd> / <kbd>P</kbd></td><td>{{ __('app.next_chapter') }} / {{ __('app.previous_chapter') }}</td></tr>
                    <tr><td><kbd>+</kbd> / <kbd>−</kbd></td><td>{{ __('app.faster') }} / {{ __('app.slower') }}</td></tr>
                    <tr><td><kbd>T</kbd></td><td>{{ __('app.show_text') }}</td></tr>
                    </tbody>
                </table>
            </section>
            <section class="card" aria-labelledby="std-h">
                <h2 id="std-h">{{ __('app.a11y_standard') }}</h2>
                <p>{{ __('app.a11y_standard_text') }}</p>
                <p class="muted" style="margin:0">{{ __('app.a11y_tested') }}</p>
            </section>
        </div>
    </div>
@endsection