@extends('layouts.simple')

@section('body')
    <div class="container small my-xl">

        <section class="card content-wrap">
            <form action="{{ url('/preferences/shortcuts') }}" method="post">
                {{ method_field('put') }}
                {{ csrf_field() }}

                <h1 class="list-heading">Interface Keyboard Shortcuts</h1>

                <div class="flex-container-row items-center gap-m wrap mb-m">
                    <p class="flex mb-none min-width-m text-small text-muted">
                        Here you can enable or disable keyboard system interface shortcuts, used for navigation
                        and actions.

                        You can customize each of the shortcuts below. Just press your desired key combination
                        after selecting the input for a shortcut.
                    </p>
                    <div class="flex min-width-m text-m-center">
                        @include('form.toggle-switch', [
                            'name' => 'enabled',
                            'value' => $enabled,
                            'label' => 'Keyboard shortcuts enabled',
                        ])
                    </div>
                </div>

                <hr>

                <h2 class="list-heading mb-m">Navigation</h2>
                <div class="flex-container-row wrap gap-m mb-xl">
                    <div class="flex min-width-l item-list">
                        @include('users.preferences.parts.shortcut-control', ['label' => 'Homepage', 'id' => 'home_view'])
                        @include('users.preferences.parts.shortcut-control', ['label' => trans('entities.shelves'), 'id' => 'shelves_view'])
                        @include('users.preferences.parts.shortcut-control', ['label' => trans('entities.books'), 'id' => 'books_view'])
                        @include('users.preferences.parts.shortcut-control', ['label' => trans('settings.settings'), 'id' => 'settings_view'])
                        @include('users.preferences.parts.shortcut-control', ['label' => trans('entities.my_favourites'), 'id' => 'favourites_view'])
                    </div>
                    <div class="flex min-width-l item-list">
                        @include('users.preferences.parts.shortcut-control', ['label' => trans('common.view_profile'), 'id' => 'profile_view'])
                        @include('users.preferences.parts.shortcut-control', ['label' => trans('auth.logout'), 'id' => 'logout'])
                        @include('users.preferences.parts.shortcut-control', ['label' => 'Global Search', 'id' => 'global_search'])
                        @include('users.preferences.parts.shortcut-control', ['label' => trans('common.next'), 'id' => 'next'])
                        @include('users.preferences.parts.shortcut-control', ['label' => trans('common.previous'), 'id' => 'previous'])
                    </div>
                </div>

                <h2 class="list-heading mb-m">Common Actions</h2>
                <div class="flex-container-row wrap gap-m mb-xl">
                    <div class="flex min-width-l item-list">
                        @include('users.preferences.parts.shortcut-control', ['label' => trans('common.new'), 'id' => 'new'])
                        @include('users.preferences.parts.shortcut-control', ['label' => trans('common.edit'), 'id' => 'edit'])
                        @include('users.preferences.parts.shortcut-control', ['label' => trans('common.copy'), 'id' => 'copy'])
                        @include('users.preferences.parts.shortcut-control', ['label' => trans('common.delete'), 'id' => 'delete'])
                        @include('users.preferences.parts.shortcut-control', ['label' => trans('common.favourite'), 'id' => 'favourite'])
                    </div>
                    <div class="flex min-width-l item-list">
                        @include('users.preferences.parts.shortcut-control', ['label' => trans('entities.export'), 'id' => 'export'])
                        @include('users.preferences.parts.shortcut-control', ['label' => trans('common.sort'), 'id' => 'sort'])
                        @include('users.preferences.parts.shortcut-control', ['label' => trans('entities.permissions'), 'id' => 'permissions'])
                        @include('users.preferences.parts.shortcut-control', ['label' => trans('common.move'), 'id' => 'move'])
                        @include('users.preferences.parts.shortcut-control', ['label' => trans('entities.revisions'), 'id' => 'revisions'])
                    </div>
                </div>

                <p class="text-small text-muted">
                    Note: When shortcuts are enabled a helper overlay is available via pressing "?" which will
                    highlight the available shortcuts for actions currently visible on the screen.
                </p>

                <div class="form-group text-right">
                    <button class="button">{{ 'Save Shortcuts' }}</button>
                </div>

            </form>
        </section>

    </div>
@stop