{% extends "layouts/app.twig" %}
{% import 'macros/base.twig' as m %}
{% import 'macros/form.twig' as f %}

{% block title %}{{ __('Design') }}{% endblock %}

{% set colors=['success', 'info', 'warning', 'danger'] %}
{% set types=[
    'primary',
    'secondary',
    'success',
    'danger',
    'warning',
    'info',
    'light',
    'dark'
]
%}
{% set types_buttons=['link']|merge(types) %}
{% set shortsum='Lorem ipsum dolor…' %}
{% set lipsum='Lorem ipsum dolor sit amet, consectetur adipisici elit…' %}
{% set linksum='Lorem ipsum! Dolor <a href="#" onclick="return false">link</a> amet, consectetur adipisici elit!' %}

{% block content %}
    <div class="col-12">
        <div class="container">
        <h1 class="mb-4">
            {{ block('title') }} <small class="text-muted">{{ themes[themeId]['name'] }}</small>
        </h1>
        <span id="elements" class="ref-id"></span>
        <h2>Elements <small class="text-muted">small</small> <a href="#elements" class="ref-link">{{ m.icon('link') }}</a></h2>
        <div class="row">
            <div class="col-md-6 col-lg-2 mb-4">
                <h3>Headings <small class="text-muted">small</small></h3>
                <h4>H4 <small class="text-muted">small</small></h4>
                <h5>H5 <small class="text-muted">small</small></h5>
                <h6>H6 <small class="text-muted">small</small></h6>
            </div>
            <div class="col-md-6 mb-4">
                <h3>Lists</h3>
                <p>
                    This page should be used when creating and testing new designs to find usability and/or design issues.
                    {{ lipsum|replace({'…': '.'}) }}
                </p>
                <ul>
                    <li>Unordered</li>
                    <li>List</li>
                    <li>Items</li>
                </ul>
                <ol>
                    <li>Ordered</li>
                    <li>List</li>
                    <li>Items</li>
                </ol>
                <p>{{ linksum|raw }} {{ lipsum }}</p>
            </div>
            <div class="col-lg-4 mb-4">
                <h3>Themes</h3>
                <ul>
                    {% for id,theme in themes %}
                        <li>
                            <a href="{{ url('design', {'theme': id}) }}"
                                {%- if id == themeId %} class="text-info"{% endif %}>
                                {{ theme['name'] }}
                            </a>
                        </li>
                    {% endfor %}
                </ul>
            </div>
        </div>
        <div class="row">
            <div class="col-md-6 col-lg-4 mb-4">
                <span id="tables" class="ref-id"></span>
                <h3>Tables <a href="#tables" class="ref-link">{{ m.icon('link') }}</a></h3>
                <table class="table table-striped">
                    <tr>
                        <th>Header 1</th>
                        <th>Header 2</th>
                        <th>Header 3</th>
                    </tr>
                    <tr>
                        <td>Table content</td>
                        <td>{{ lipsum }}</td>
                        <td><span class="text-success">{{ m.icon('check-lg') }}</span></td>
                    </tr>
                    <tr>
                        <td>Another content</td>
                        <td>Lorem ipsum</td>
                        <td><span class="text-danger">{{ m.icon('x-lg') }}</span></td>
                    </tr>
                </table>
            </div>
            <div class="col-md-6 col-lg-4 mb-4">
                <h3>Navigation Tabs</h3>
                <ul class="nav nav-tabs">
                    <li class="nav-item">
                        <a class="nav-link active" href="#" onclick="return false">Lorem</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#" onclick="return false">Ipsum</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#" onclick="return false">Dolor</a>
                    </li>
                </ul>
            </div>
            <div class="col-md-6 col-lg-4 mb-4">
                <h3>Navigation Pills</h3>
                <ul class="nav nav-pills flex-column">
                    <li class="nav-item">
                        <a class="nav-link active" href="#" onclick="return false">Some</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#" onclick="return false">Test</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#" onclick="return false">Menu</a>
                    </li>
                </ul>
            </div>
        </div>

        <div class="row">
            <div class="col-6 col-md-12 mb-4">
                <span id="texts" class="ref-id"></span>
                <h3>Texts <a href="#texts" class="ref-link">{{ m.icon('link') }}</a></h3>
                <p>
                    {{ linksum|raw }}<br>
                    {{ lipsum }} {{ lipsum|replace({'…': '.'}) }} {{ lipsum|replace({'…': '.'}) }} {{ lipsum }}
                </p>

                <div class="row mb-4">
                    {% for color in types %}
                        <div class="col-12 col-md-3">
                            <p class="text-{{ color }}">{{ color|capitalize }}: {{ linksum|raw }}</p>
                        </div>
                    {% endfor %}
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-6 col-md-12 mb-4">
                <span id="badges" class="ref-id"></span>
                <h3>Badges <a href="#badges" class="ref-link">{{ m.icon('link') }}</a></h3>
                <p>
                    {% for type in types %}
                        <span class="badge bg-{{ type }}">{{ type|capitalize }}</span>
                    {% endfor %}
                </p>
            </div>
            <div class="col-6 col-md-12 mb-4">
                <span id="buttons" class="ref-id"></span>
                <h3>Buttons <a href="#buttons" class="ref-link">{{ m.icon('link') }}</a></h3>
                <p>
                    {% for type in types_buttons %}
                        {{ f.button(type|capitalize, {'btn_type': type, 'name': 'button-' ~ type}) }}
                    {% endfor %}
                </p>
            </div>
        </div>

        <div class="row mb-4">
            <div class="col">
                <span id="alerts" class="ref-id"></span>
                <h3>Alerts <a href="#alerts" class="ref-link">{{ m.icon('link') }}</a></h3>

                <div class="row">
                    {% for color in colors %}
                        <div class="col">
                            <h4>{{ color|capitalize }}</h4>
                            {{ m.alert(linksum, color, true) }}
                        </div>
                    {% endfor %}
                </div>
            </div>
        </div>

        <div class="row mb-4">
            <div class="col-md-12 mb-3">
                <span id="cards" class="ref-id"></span>
                <h3>Cards <a href="#cards" class="ref-link">{{ m.icon('link') }}</a></h3>

                <div class="row">
                    {% for type in types %}
                        <div class="col mb-3">
                            <div class="card border-{{ type }} {{ m.type_bg_class() }}">
                                <h4 class="card-header bg-{{ type }}">{{ type|capitalize }}</h4>
                                <div class="card-body">
                                    <p class="card-text">{{ shortsum }}</p>
                                    <p class="card-text"><a href="#" onclick="return false" class="card-link">Some link</a></p>
                                </div>
                                <div class="card-footer text-muted">
                                    Footer
                                </div>
                            </div>
                        </div>
                    {% endfor %}
                </div>
            </div>
        </div>

        <div class="row mb-4">
            <div class="col-md-12">
                <span id="forms" class="ref-id"></span>
                <h3>Forms <a href="#forms" class="ref-link">{{ m.icon('link') }}</a></h3>

                <div class="row">
                    <div class="col-md-3 col-lg-2">
                        <h5>Text</h5>
                        <code>f.input(id, label, opt)</code>
                        {{ f.input('form-input-text', 'Text field', {
                            'value': 'Value',
                        }) }}
                        {{ f.input('form-input-text-label-icons', 'Text field with required and info icon', {
                            'value': 'Value',
                            'required_icon': true,
                            'info': 'Very important field info!',
                        }) }}
                        {{ f.input('form-input-text-hidden-label', 'Hidden label', {
                            'value': 'Hidden label',
                            'hide_label': true,
                        }) }}
                        {{ f.input('form-input-text-disabled', 'Disabled', {
                            'disabled': true,
                            'value': 'Value',
                        }) }}
                        {{ f.input('form-input-text-readonly', null, {
                            'type': 'Readonly',
                            'readonly': true,
                            'value': 'w/o label',
                        }) }}
                    </div>

                    <div class="col-md-3 col-lg-2">
                        <h5>Password</h5>
                        <code>f.password(id, label, opt)</code>
                        {{ f.input('form-input-password', 'Password', {
                            'type': 'password',
                            'value': 'Value',
                        }) }}
                    </div>

                    <div class="col-md-3 col-lg-2">
                        <h5>Number</h5>
                        <code>f.number(id, label, opt)</code>
                        {{ f.number('form-input-number', 'Number field', {
                            'type': 'number',
                            'value': 42,
                        }) }}
                        {{ f.number('form-input-number-label-icons', 'Number field with required and info icon', {
                            'type': 'number',
                            'value': 42,
                            'required_icon': true,
                            'info': 'Very important field info!',
                        }) }}
                        {{ f.number('form-input-number-disabled', 'Disabled', {
                            'disabled': true,
                            'value': 42,
                        }) }}
                        {{ f.number('form-input-number-readonly', 'Readonly', {
                            'readonly': true,
                            'value': 42,
                        }) }}
                        {{ f.number('form-input-number-wo-label', null, {
                            'type': 'number',
                            'value': 42,
                        }) }}
                    </div>

                    <div class="col-md-3 col-lg-2">
                        <h5>Textarea</h5>
                        <code>f.textarea(id, label, opt)</code>
                        {{ f.textarea('form-input-textarea', 'Textarea', {
                            'rows': 2,
                            'value': lipsum,
                        }) }}
                        {{ f.textarea('form-input-textarea-label-icons', 'Textarea with required and info icon', {
                            'required_icon': true,
                            'info': 'Very important field info!',
                            'rows': 2,
                            'value': lipsum,
                        }) }}
                        {{ f.textarea('form-input-textarea-wo-label', null, {
                            'required_icon': true,
                            'rows': 2,
                            'value': 'w/o label',
                        }) }}
                    </div>

                    <div class="col-md-3 col-lg-2">
                        <h5>Select</h5>
                        <code>f.textarea(id, label, data, opt)</code>
                        {{ f.select('form-input-select-1', 'Select 1', {
                                'opt1': 'Option 1',
                                'opt2': 'Option 2',
                                'opt3': 'Another option',
                                'opt4': 'A looooooooong item item item item',
                        }) }}
                        {{ f.select(
                            'form-input-select-2',
                            'Select 2',
                            {
                                'sh': 'Bash',
                                'js': 'JavaScript',
                                'p': 'PHP',
                                'py': 'Python',
                            },
                            {
                                'selected': 'js',
                            },
                        ) }}
                        {{ f.select('form-input-select-2', 'Select 3', selectOptions, {
                            'selected': 'option_7',
                        }) }}
                        {{ f.select('date-select', 'Date select', dateSelectOptions) }}
                    </div>

                    <div class="col-md-3 col-lg-2">
                        <h5>Buttons</h5>
                        <code>f.button(label, opt)</code>
                        <div class="mb-3">
                            {{ f.button('Button') }}
                        </div>
                        <div class="mb-3">
                            {{ f.button('sm button with icons', {
                                'size': 'sm',
                                'icon_left': 'check',
                                'icon_right': 'info',
                                'title': 'Click me!',
                            }) }}
                        </div>
                        <code>f.submit(label)</code>
                        <form id="form">
                            {{ f.submit('Go!') }}
                        </form>
                    </div>

                    <div id="checkboxes" class="col-md-3 col-lg-2">
                        <h5>Checkbox</h5>
                        <code>f.checkbox(id, label, opt)</code>
                        {{ f.checkbox('form-input-checkbox', 'Checkbox 1', {
                            'checked': true, 'value': '1',
                        }) }}
                        {{ f.checkbox('form-input-checkbox-2', 'Checkbox 2', {
                            'checked': false, 'value': '2',
                        }) }}
                        {{ f.checkbox('form-input-checkbox-3', 'Checkbox 3', {
                            'checked': false, 'value': '3',
                        }) }}
                        <div class="d-grid gap-2">
                            <button type="button" class="btn btn-secondary d-print-none checkbox-selection" data-id="checkboxes" data-value="true">
                                Select all
                            </button>
                            <button type="button" class="btn btn-secondary d-print-none checkbox-selection" data-id="checkboxes" data-value="[2,3]">
                                Select 2, 3
                            </button>
                            <button type="button" class="btn btn-secondary d-print-none checkbox-selection" data-id="checkboxes" data-value="false">
                                Unselect all
                            </button>
                        </div>
                        <hr>
                        {{ f.checkbox('form-input-checkbox-disabled', 'Disabled', {
                            'disabled': true,
                        }) }}
                        {{ f.checkbox('form-input-checkbox-raw-label', '<i>Raw label</i>', {
                            'raw_label': true,
                        }) }}
                    </div>

                    <div id="checkboxes" class="col-md-3 col-lg-2">
                        <h5>Switch</h5>
                        <code>f.switch(id, label, opt)</code>
                        {{ f.switch('form-switch', 'Switch') }}
                        {{ f.switch('form-switch-checked', 'Switch (checked)', {
                            'checked': true,
                        }) }}
                        {{ f.switch('form-switch-disabled', 'Switch (disabled)', {
                            'disabled': true,
                        }) }}
                    </div>

                    <div class="col-md-3 col-lg-2">
                        <h5>Hidden</h5>
                        <code>hidden(name, value)</code>
                        <p>
                        {{ f.hidden('hidden-name', 'hidden value') | escape }}
                        </p>
                    </div>

                    <div class="col-md-3 col-lg-2 checkbox-inline">
                        <h5>Radio</h5>
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" id="yey" checked="checked" name="form-input-radio" value="1">
                            <label class="form-check-label" for="yey">Yey</label>
                        </div>
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" id="nay" name="form-input-radio">
                            <label class="form-check-label" for="nay">Nay</label>
                        </div>
                    </div>

                    <div class="col-md-3 col-lg-2">
                        <h5>Date / time</h5>
                        <div class="mb-3">
                            <label class="form-label" for="input_date">Date</label>
                            <input id="input_date" type="date" placeholder="YYYY-MM-DD" pattern="[0-9]{4}-[0-9]{2}-[0-9]{2}" name="design-date" class="form-control" value="2021-09-15">
                        </div>
                        <div class="mb-3">
                            <label class="form-label" for="input_datetime_local">Datetime</label>
                            <input id="input_datetime_local" type="datetime-local" placeholder="YYYY-MM-DD HH:MM" pattern="[0-9]{4}-[0-9]{2}-[0-9]{2} ([01][0-9]|2[0-3]):[0-5][0-9]" name="design-datetime" class="form-control" value="2021-09-15T13:37">
                        </div>
                        <div class="mb-3">
                            <label class="form-label" for="input_time">Time</label>
                            <input type="time" class="form-control" id="input_time" name="input_time" size="5" pattern="^\d{1,2}:\d{2}$" placeholder="HH:MM" maxlength="5" value="13:37">
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <span id="other" class="ref-id"></span>
        <h3>Other <a href="#other" class="ref-link">{{ m.icon('link') }}</a></h3>
        <div class="row mb-4">
            <div class="col">
                <h4>Code</h4>
                <p>
                    <code>3.1415926535897932384626433832795</code>
                </p>
            </div>
            <div class="col">
                <h4>Pagination</h4>
                <ul class="pagination">
                    <li class="page-item active">
                        <a class="page-link" href="#" onclick="return false">1</a>
                    </li>
                    <li class="page-item">
                        <a class="page-link" href="#" onclick="return false">2</a>
                    </li>
                    <li class="page-item">
                        <a class="page-link" href="#" onclick="return false">3</a>
                    </li>
                </ul>
            </div>
            <div class="col">
                <h4>Countdowns</h4>
                <ul>
                    <li title="{{ timestamp30s.format(__('Y-m-d H:i')) }}" data-countdown-ts="{{ timestamp30s.getTimestamp() }}">30s: %c</li>
                    <li title="{{ timestamp30m.format(__('Y-m-d H:i')) }}" data-countdown-ts="{{ timestamp30m.getTimestamp() }}">30m: %c</li>
                    <li title="{{ timestamp59m.format(__('Y-m-d H:i')) }}" data-countdown-ts="{{ timestamp59m.getTimestamp() }}">59m: %c</li>
                    <li title="{{ timestamp1h.format(__('Y-m-d H:i')) }}" data-countdown-ts="{{ timestamp1h.getTimestamp() }}">1h: %c</li>
                    <li title="{{ timestamp1h30m.format(__('Y-m-d H:i')) }}" data-countdown-ts="{{ timestamp1h30m.getTimestamp() }}">1h 30m: %c</li>
                    <li title="{{ timestamp1h31m.format(__('Y-m-d H:i')) }}" data-countdown-ts="{{ timestamp1h31m.getTimestamp() }}">1h 31m: %c</li>
                    <li title="{{ timestamp2h.format(__('Y-m-d H:i')) }}" data-countdown-ts="{{ timestamp2h.getTimestamp() }}">2h: %c</li>
                    <li title="{{ timestamp2d.format(__('Y-m-d H:i')) }}" data-countdown-ts="{{ timestamp2d.getTimestamp() }}">2d: %c</li>
                    <li title="{{ timestamp3m.format(__('Y-m-d H:i')) }}" data-countdown-ts="{{ timestamp3m.getTimestamp() }}">3m: %c</li>
                    <li title="{{ timestamp22y.format(__('Y-m-d H:i')) }}" data-countdown-ts="{{ timestamp22y.getTimestamp() }}">22y: %c</li>
                </ul>
                <ul>
                    <li title="{{ timestamp30mago.format(__('Y-m-d H:i')) }}" data-countdown-ts="{{ timestamp30mago.getTimestamp() }}">30m ago: %c</li>
                    <li title="{{ timestamp45mago.format(__('Y-m-d H:i')) }}" data-countdown-ts="{{ timestamp45mago.getTimestamp() }}">45m ago: %c</li>
                </ul>
            </div>
        </div>

        <span id="macros" class="ref-id"></span>
        <h2>Macros <a href="#macros" class="ref-link">{{ m.icon('link') }}</a></h2>
        <h3>base.twig</h3>
        <div class="row mb-4">
            <div class="col-md-3">
                <h4><code>angel()</code></h4>
                <p>{{ m.angel() }}</p>
            </div>
            <div class="col-md-3">
                <h4><code>icon(icon_name)</code></h4>
                <p>{{ m.icon('star') }}</p>
            </div>
            <div class="col-md-3">
                <h4><code>iconBool(true)</code></h4>
                <p>{{ m.iconBool(true) }} {{ m.iconBool(false) }}</p>
            </div>
            <div class="col-md-3">
                <h4><code>alert(message, type)</code></h4>
                <p>{{ m.alert('Test content', 'info') }}</p>
            </div>
            <div class="col-md-3">
                <h4><code>user(user, opt)</code></h4>
                <p>
                    {{ m.user(demo_user) }}<br>
                    {{ m.user(demo_user_2, {'pronoun': true}) }}
                </p>
            </div>
            <div class="col-md-3">
                <h4><code>button(label, url, type, size)</code></h4>
                <p>{{ m.button('Label', '#', 'info', 'sm') }}</p>
            </div>
        </div>

        <span id="bar_chart" class="ref-id"></span>
        <h3>Bar Chart <a href="#bar_chart" class="ref-link">{{ m.icon('link') }}</a></h3>
        {{ bar_chart | raw }}
    </div>
    </div>
    <script>
        document.getElementById('form').addEventListener('submit', (e) => {
            e.preventDefault();
            return false;
        });
    </script>
{% endblock %}