{% extends "base.html" %}
{% load i18n cms_tags allink_meta_tags %}

{% block meta_tags %}
    {% render_meta_og overwrite_dict="{'meta_page_title': 'Styleguide'}" %}
{% endblock meta_tags %}

{% block body_class %}tpl-styleguide{% endblock %}

{% block logo_addition_container %}
{% endblock logo_addition_container %}

{% block content %}
    <div class="content-section styleguide-section">
        <div class="content-section__container">
            {% static_placeholder "styleguide" %}
        </div>
    </div>


    {% comment %}
        Headings
    {% endcomment %}
    <div class="content-section styleguide-section">
        <div class="content-section__container">

            <header class="content-section__section-heading-container">
                <h1 class="content-section__section-heading">Headings</h1>
            </header>

            <div class="text-container">
                <div class="border-container">
                    <h1>Heading 1</h1>
                </div>
                <div class="border-container">
                    <h2>Heading 2</h2>
                </div>
                <div class="border-container">
                    <h3>Heading 3</h3>
                </div>
                <div class="border-container">
                    <h4>Heading 4</h4>
                </div>
                <div class="border-container">
                    <h5>Heading 5</h5>
                </div>
                <div class="border-container">
                    <h6>Heading 6</h6>
                </div>
            </div>
        </div>
    </div>

    {% comment %}
        Paragraphs
    {% endcomment %}
    <div class="content-section styleguide-section">
        <div class="content-section__container">

            <header class="content-section__section-heading-container">
                <h1 class="content-section__section-heading">Paragraphs</h1>
            </header>

            <div class="text-container">
                <div class="border-container">
                    <p>Text Normal = Default Paragraph - Parturient sed at ac duis semper dapibus dictumst class curabitur felis etiam eu inceptos praesent a himenaeos nec at quis enim tincidunt a volutpat hendrerit a suspendisse tempus aliquam.</p>
                </div>
                <div class="border-container">
                    <p class="small">Text Small = Default Paragraph - Parturient sed at ac duis semper dapibus dictumst class curabitur felis etiam eu inceptos praesent a himenaeos nec at quis enim tincidunt a volutpat hendrerit a suspendisse tempus aliquam.</p>
                </div>
                <div class="border-container">
                    <p class="lead">Text Large = Lead Text - Parturient sed at ac duis semper dapibus dictumst class curabitur felis etiam eu inceptos praesent a himenaeos nec at quis enim tincidunt a volutpat hendrerit a suspendisse tempus aliquam.</p>
                </div>
                <div class="border-container text-container">
                    <p>Text Normal = Default Paragraph - Parturient sed at ac duis semper dapibus dictumst class curabitur felis etiam eu inceptos praesent a himenaeos nec at quis enim tincidunt a volutpat hendrerit a suspendisse tempus aliquam.</p>
                    <p>
                        {% include "partials/buttons/link.html" with link_url="https://allink.ch" link_label="Kontakt" link_classes="btn btn-default" link_attributes='target="_blank"' %}
                    </p>
                </div>
                <div class="content-plugin text-plugin text-container border-container">
                    <h2>Anfahrt mit dem Auto</h2>

                    <p>Nehmen Sie die Ausfahrt Wallisellen. Beim Möbel Pfister rechts einbiegen (Hochbord Nord) und dann beim 1. Kreisel links. Sie finden uns direkt hinter dem Interio.</p>

                    <p>
                        {% include "partials/buttons/link.html" with link_url="https://allink.ch" link_label="Kontakt" link_classes="btn btn-default" link_attributes='target="_blank"' %}
                    </p>
                </div>
            </div>
        </div>
    </div>

    {% comment %}
        Text-Container Text Styles
    {% endcomment %}
    <div class="content-section styleguide-section">
        <div class="content-section__container">

            <header class="content-section__section-heading-container">
                <h1 class="content-section__section-heading">Text-Container Text Styles</h1>
            </header>

            <div class="text-container">
                <h1>Heading 1</h1>
                <p>Nehmen Sie die Ausfahrt Wallisellen. Beim Möbel Pfister rechts einbiegen (Hochbord Nord) und dann beim 1. Kreisel links. Sie finden uns direkt hinter dem Interio.</p>
                <h2>Heading 2</h2>
                <p>Nehmen Sie die Ausfahrt Wallisellen. Beim Möbel Pfister rechts einbiegen (Hochbord Nord) und dann beim 1. Kreisel links. Sie finden uns direkt hinter dem Interio.</p>
                <h3>Heading 3</h3>
                <p>Nehmen Sie die Ausfahrt Wallisellen. Beim Möbel Pfister rechts einbiegen (Hochbord Nord) und dann beim 1. Kreisel links. Sie finden uns direkt hinter dem Interio.</p>
                <h4>Heading 4</h4>
                <p>Nehmen Sie die Ausfahrt Wallisellen. Beim Möbel Pfister rechts einbiegen (Hochbord Nord) und dann beim 1. Kreisel links. Sie finden uns direkt hinter dem Interio.</p>
                <h5>Heading 5</h5>
                <p>Nehmen Sie die Ausfahrt Wallisellen. Beim Möbel Pfister rechts einbiegen (Hochbord Nord) und dann beim 1. Kreisel links. Sie finden uns direkt hinter dem Interio.</p>
                <h6>Heading 6</h6>
                <p>Nehmen Sie die Ausfahrt Wallisellen. Beim Möbel Pfister rechts einbiegen (Hochbord Nord) und dann beim 1. Kreisel links. Sie finden uns direkt hinter dem Interio.</p>
            </div>
        </div>
    </div>

    {% comment %}
        Lists
    {% endcomment %}
    <div class="content-section styleguide-section inverted-colors has-bg-color" style="background:#999;">
        <div class="content-section__container">

            <header class="content-section__section-heading-container">
                <h1 class="content-section__section-heading">Lists</h1>
            </header>

            <div class="text-container">
                <p><a href="#" class="text">Beispiel Link innerhalb von Text (inverted colors)</a> parturient sed at ac duis semper dapibus dictumst class curabitur</p>
                <h3>Unordered</h3>
                <ul>
                    <li>Long List Item Accumsan interdum aenean ut natoque placerat vestibulum quisque habitasse dapibus cum adipiscing tortor tincidunt suspendisse platea proin fermentum vehicula ultricies nec.</li>
                    <li>List Item Example</li>
                    <li>List Item Example</li>
                    <li>List Item Example</li>
                </ul>
                <h3>Ordered</h3>
                <ol>
                    <li>Long List Item Accumsan interdum aenean ut natoque placerat vestibulum quisque habitasse dapibus cum adipiscing tortor tincidunt suspendisse platea proin fermentum vehicula ultricies nec.</li>
                    <li>List Item Example</li>
                    <li>List Item Example</li>
                    <li>List Item Example</li>
                </ol>
            </div>
        </div>
    </div>

    {% comment %}
        Buttons & Links
    {% endcomment %}

    <div class="content-section styleguide-section btn-section">
        <div class="content-section__container">

            <header class="content-section__section-heading-container">
                <h1 class="content-section__section-heading">Buttons & Links</h1>
            </header>

            <div class="manage-spacings">
                <div class="text-container">

                        <div class="content-section">

                        <p>
                            This is some text with a {% include "partials/buttons/link.html" with link_url="https://allink.ch" link_label="allink" link_classes="text" %} in it.
                        </p>
                        <p>
                            This is some text with a {% include "partials/buttons/link.html" with link_url="https://allink.ch" link_label="allink" link_classes="text" icon="softpage" %} in it.
                        </p>
                        <p>
                            This is some text with a {% include "partials/buttons/link.html" with link_url="https://allink.ch" link_label="allink" link_classes="text" link_attributes='target="_blank"' icon='arrow-external' %} in it.
                        </p>
                        <p>
                            This is a {% include "partials/buttons/link.html" with link_url="https://allink.ch" link_label="Button" link_classes="btn btn-default" link_attributes='target="_blank"' %} in it.
                        </p>
                        <p>
                            This is a {% include "partials/buttons/link.html" with link_url="/en/news/" link_label="Button" link_classes="btn btn-default" link_attributes='data-trigger-softpage' icon="softpage" modal_header_title="News" %} in it.
                        </p>
                        <p>
                            This is a {% include "partials/buttons/link.html" with link_url="https://allink.ch" link_label="Button" link_classes="btn btn-default" link_attributes='target="_blank"' icon='arrow-external' %} in it.
                        </p>

                    </div>
                </div>
                <br>
                <br>
                <div class="text-container">
                    <h3>btn (small)</h3>
                </div>
                <div class="form-container">
                    <form>
                        <div class="btn-container">
                            {% include "partials/buttons/link.html" with link_url="https://allink.ch" link_label="Default" link_classes="btn btn-sm btn-default" %}
                            {% include "partials/buttons/link.html" with link_url="https://allink.ch" link_label="Primary" link_classes="btn btn-sm btn-primary" %}
                        </div>
                    </form>
                </div>
                <div class="text-container">
                    <h3>btn (normal)</h3>
                </div>
                <div class="form-container">
                    <form>
                        <div class="btn-container">
                            {% include "partials/buttons/link.html" with link_url="https://allink.ch" link_label="Default" link_classes="btn btn-default" %}
                            {% include "partials/buttons/link.html" with link_url="https://allink.ch" link_label="Primary" link_classes="btn btn-primary" %}
                        </div>
                    </form>
                </div>
                <div class="text-container">
                    <h3>btn (large)</h3>
                </div>
                <div class="form-container">
                    <form>
                        <div class="btn-container">
                            {% include "partials/buttons/link.html" with link_url="https://allink.ch" link_label="Default" link_classes="btn btn-lg btn-default" %}
                            {% include "partials/buttons/link.html" with link_url="https://allink.ch" link_label="Primary" link_classes="btn btn-lg btn-primary" %}
                        </div>
                    </form>
                </div>
                <div class="text-container">
                    <h3>btn (disabled)</h3>
                </div>
                <div class="form-container">
                    <form>
                        <div class="btn-container">
                            {% include "partials/buttons/link.html" with link_url="https://allink.ch" link_label="Default" link_classes="btn btn-default disabled " %}
                            {% include "partials/buttons/link.html" with link_url="https://allink.ch" link_label="Primary" link_classes="btn btn-primary disabled " %}
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    {% comment %}
        Teaser
    {% endcomment %}
    <div class="content-section styleguide-section">
        <div class="content-section__container">

            <header class="content-section__section-heading-container">
                <h1 class="content-section__section-heading">Teaser</h1>
            </header>

            <div class="grid-static-container">
                <div class="the-grid ajax-items-container">
                    <div class="grid-item">
                        {% include 'allink_teaser/tile/item.html' with teaser_title="Teaser title" teaser_image="" teaser_technical_title="Teaser technical title" teaser_description="Parturient sed at ac duis semper dapibus dictumst class curabitur. Parturient sed at ac duis semper dapibus dictumst class curabitur." teaser_link="https://www.allink.ch/" teaser_link_text="Read more" %}
                    </div>
                    <div class="grid-item">
                        {% include 'allink_teaser/tile/item.html' with teaser_title="Teaser title" teaser_image="" teaser_technical_title="Teaser technical title" teaser_description="Parturient sed at ac duis semper dapibus dictumst class curabitur. Parturient sed at ac duis semper dapibus dictumst class curabitur." teaser_link="https://www.allink.ch/" teaser_link_text="Read more" %}
                    </div>
                </div>
            </div>
        </div>
    </div>

    {% comment %}
        Form
    {% endcomment %}

    <div class="content-section styleguide-section">
        <div class="content-section__container">

            <header class="content-section__section-heading-container">
                <h1 class="content-section__section-heading">Form (Default)</h1>
            </header>

            <div class="manage-spacings">
                <div class="form-container">
                    <form class="form-default validate-form" method="post" action="">
                        <div class="form-group">
                            <label class="control-label" for="group">
                                 <span class="label-text">
                                     {% trans "Button Group" %}
                                 </span>
                            </label>
                            <div class="input-group">
                                <input type="text" name="group" class="form-control" placeholder="Search for...">
                                <span class="input-group-btn">
                                    <button class="btn btn-default" type="button">Go!</button>
                                </span>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label" for="text">
                                 <span class="label-text">
                                     {% trans "Text" %}
                                 </span><span class="required-symbol">
                                     <span class="sr-only">({% trans "required" %})</span>
                                 </span>
                            </label>
                            <input class="form-control" id="text" name="text" type="text" placeholder="Placeholder Text" required>
                        </div>
                        <div class="form-group has-error">
                            <label class="control-label" for="text">
                                 <span class="label-text">
                                     {% trans "Input has error" %}
                                 </span><span class="required-symbol">
                                     <span class="sr-only">({% trans "required" %})</span>
                                 </span>
                            </label>
                            <input class="form-control error" id="text" name="text" type="text" placeholder="Placeholder Text" required>
                            <ul class="errorlist">
                                <li>Example error message</li>
                            </ul>
                        </div>
                        <div class="form-group">
                            <label class="control-label" for="text-d">
                                 <span class="label-text">
                                     {% trans "Disabled Field" %}
                                 </span>
                            </label>
                            <input class="form-control" id="text-d" name="text-d" type="text" disabled>
                        </div>
                        <div class="form-group">
                            <label class="control-label" for="message">
                                 <span class="label-text">
                                     {% trans "Textarea (with text)" %}
                                 </span>
                            </label>
                            <textarea class="form-control" cols="40" id="message" name="message" rows="5">{% spaceless %}
                                Default Text - Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit.
                            {% endspaceless %}
                            </textarea>
                        </div>
                        <div class="form-group">
                            <label class="control-label" for="textarea">
                                <span class="label-text">
                                    {% trans "Textarea (blank)" %}
                                </span><span class="required-symbol">
                                    <span class="sr-only">({% trans "required" %})</span>
                                </span>
                            </label>
                            <textarea class="form-control" cols="40" id="textarea" name="textarea" rows="5" required></textarea>
                        </div>
                        <div class="form-group">
                            <label class="control-label" for="select">
                                 <span class="label-text">
                                     {% trans "Select a Choice" %}
                                 </span><span class="required-symbol">
                                    <span class="sr-only">({% trans "required" %})</span>
                                </span>
                            </label>
                            <select class="form-control selectpicker" title="Please Select..." id="select" name="select" required>
                                <option value="First Choice">
                                    First Choice
                                </option>
                                <option value="Second Choice">
                                    Second Choice
                                </option>
                                <option value="Third Choice">
                                    Third Choice
                                </option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label class="control-label" for="file-upload">
                                 <span class="label-text">
                                     {% trans "Custom File Upload" %}
                                 </span>
                            </label>
                            <div class="custom-file-upload">
                                <input type="file" id="file-upload" value="Select file...">
                                <label for="file-upload">
                                     Select file...
                                </label>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label" for="date1">
                                 <span class="label-text">
                                     {% trans "Datepicker 1 (required)" %}
                                 </span><span class="required-symbol">
                                     <span class="sr-only">({% trans "required" %})</span>
                                 </span>
                            </label>
                            <div class="datepicker-container">
                                <input class="datepicker" id="date1" name="date1" type="text" placeholder="{% trans "Select date..." %}" required>
                                <span class="calendar-btn">
                                    <span class="sr-only">{% trans "Open Date Picker" %}</span>
                                </span>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label" for="date2">
                                 <span class="label-text">
                                     {% trans "Datepicker 2" %}
                                 </span>
                            </label>
                            <div class="datepicker-container">
                                <input class="datepicker" id="date2" name="date2" type="text" placeholder="{% trans "Select date..." %}">
                                <span class="calendar-btn">
                                    <span class="sr-only">{% trans "Open Date Picker" %}</span>
                                </span>
                                <span class="clear-btn">
                                    <span class="sr-only">{% trans "Clear Field" %}</span>
                                </span>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label" for="date2">
                                 <span class="label-text">
                                     {% trans "Date/Timepicker" %}
                                 </span>
                            </label>
                            <div class="datepicker-container">
                                <input class="datepicker" data-enableTime data-altFormat="D, j. F Y, H:i" id="date2" name="date2" type="text" placeholder="{% trans "Select date/time..." %}">
                                <span class="calendar-btn">
                                    <span class="sr-only">{% trans "Open Date/Time Picker" %}</span>
                                </span>
                                <span class="clear-btn">
                                    <span class="sr-only">{% trans "Clear Field" %}</span>
                                </span>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label" for="date2">
                                 <span class="label-text">
                                     {% trans "Timepicker" %}
                                 </span>
                            </label>
                            <div class="datepicker-container">
                                <input class="datepicker" data-enableTime data-noCalendar data-altFormat="H:i" id="date2" name="date2" type="text" placeholder="{% trans "Select time..." %}">
                                <span class="time-btn">
                                    <span class="sr-only">{% trans "Open Time Picker" %}</span>
                                </span>
                                <span class="clear-btn">
                                    <span class="sr-only">{% trans "Clear Field" %}</span>
                                </span>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label">
                                 <span class="label-text">
                                     {% trans "Check all that apply (checkbox)" %}
                                 </span>
                            </label>
                            <div class="form-group">
                                <div class="checkbox">
                                    <label>
                                        <input name="checkbox" type="checkbox" value="First Choice">
                                        <span class="custom-checkbox"></span>
                                        First Choice
                                    </label>
                                </div>
                                <div class="checkbox">
                                    <label>
                                        <input name="checkbox" type="checkbox" value="Second Choice">
                                        <span class="custom-checkbox"></span>
                                        Second Choice
                                    </label>
                                </div>
                                <div class="checkbox">
                                    <label>
                                        <input name="checkbox" type="checkbox" value="Third Choice">
                                        <span class="custom-checkbox"></span>
                                        Third Choice
                                    </label>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label">
                                 <span class="label-text">
                                     {% trans "Select a Choice (radio)" %}
                                 </span>
                            </label>
                            <div class="">
                                <div class="radio">
                                    <label>
                                        <input name="radio" type="radio" value="First Choice" checked >
                                        <span class="custom-radio"></span>
                                        First Choice
                                    </label>
                                </div>
                                <div class="radio">
                                    <label>
                                        <input name="radio" type="radio" value="Second Choice">
                                        <span class="custom-radio"></span>
                                        Second Choice
                                    </label>
                                </div>
                                <div class="radio">
                                    <label>
                                        <input name="radio" type="radio" value="Third Choice">
                                        <span class="custom-radio"></span>
                                        Third Choice
                                    </label>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label" for="url">
                                 <span class="label-text">
                                     {% trans "URL" %}
                                 </span>
                            </label>
                            <input class="form-control" id="url" name="url" type="text">
                        </div>
                        <div class="form-group">
                            <div>
                                <button class="btn btn-default" name="submit" type="submit">
                                    Submit
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>

        </div>
    </div>

    {% comment %}
        Form
    {% endcomment %}

    <div class="content-section styleguide-section inverted-colors has-bg-color project" style="background:#999;">
        <div class="content-section__container">

            <header class="content-section__section-heading-container">
                <h1 class="content-section__section-heading">Form (Inverted Colors)</h1>
            </header>

            <div class="manage-spacings">
                <div class="form-container">
                    <form class="form-default validate-form" method="post" action="">
                        <div class="form-group">
                            <label class="control-label" for="group">
                                 <span class="label-text">
                                     {% trans "Button Group" %}
                                 </span>
                            </label>
                            <div class="input-group">
                                <input type="text" name="group" class="form-control" placeholder="Search for...">
                                <span class="input-group-btn">
                                    <button class="btn btn-default" type="button">Go!</button>
                                </span>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label" for="text">
                                 <span class="label-text">
                                     {% trans "Text" %}
                                 </span><span class="required-symbol">
                                     <span class="sr-only">({% trans "required" %})</span>
                                 </span>
                            </label>
                            <input class="form-control" id="text" name="text" type="text" placeholder="Placeholder Text" required>
                        </div>
                        <div class="form-group">
                            <div>
                                <button class="btn btn-default" name="submit" type="submit">
                                    Submit
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>

        </div>
    </div>
{% endblock content %}

{% block footer %}
{% endblock footer %}
