{% extends "wagtailadmin/generic/base.html" %}
{% load wagtailadmin_tags i18n %}

{% block extra_css %}
    {{ block.super }}

    {{ example_form.media.css }}
{% endblock %}

{% block bodyclass %}styleguide{% endblock %}

{% block header %}
    <div class="w-sticky w-top-0 w-z-header">
        <aside aria-label="{% trans 'Minimap' %}" data-minimap-container></aside>
    </div>
    {{ block.super }}
{% endblock %}

{% block main_content %}
    {% panel id="typography" heading="Typography" %}
        <h1>This is an h1</h1>
        <h2>This is an h2</h2>
        <h3>This is an h3</h3>
        <h4>This is an h4</h4>
        <h5>This is an h5</h5>
        <p>This is a paragraph</p>

        <ul>
            <li>These are</li>
            <li>items in an</li>
            <li>unordered list</li>
        </ul>

        <ol>
            <li>These are</li>
            <li>items in an</li>
            <li>ordered list</li>
        </ol>

        <code>This is an example of code</code>
    {% endpanel %}

    {% panel id="help" heading="Help text" %}
        <p>
            Help text is not to be confused with the messages that appear in a banner drop down from the top of the screen. Help text are permanent instructions, visible on every page view, that explain or warn about something.
        </p>

        {% help_block status="info" %}
            <p>This is help text that might be just for <a href="#help">information</a>, explaining what happens next, or drawing the user's attention to something they're about to do</p>
            <p>It could be multiple lines</p>
        {% endhelp_block %}

        {% help_block status="warning" %}
            A warning message might be output in cases where a user's action could have serious <a href="#help">consequences</a>.
        {% endhelp_block %}

        {% help_block status="critical" %}
            A critical message would probably be rare, in cases where a particularly brittle or <a href="#help">dangerously destructive action</a> could be performed and needs to be warned about.
        {% endhelp_block %}

    {% endpanel %}

    {% panel id="listings" heading="Listings" %}

        <h3><code>table</code> listing</h3>
        <table class="listing">
            <thead>
                <tr>
                    <th>Heading 1</th>
                    <th>Heading 2</th>
                    <th>Heading 3</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td class="title">
                        <h2><a href="">TD with title class</a></h2>
                    </td>
                    <td>Standard TD</td>
                    <td>Standard TD</td>
                </tr>
                <tr class="unpublished">
                    <td class="title">
                        <h2><a href="">Unpublished TD with title class</a></h2>
                    </td>
                    <td>Standard TD</td>
                    <td>Standard TD</td>
                </tr>
                <tr>
                    <td class="title">
                        <h2><a href="">TD with title class</a></h2>
                    </td>
                    <td>Standard TD</td>
                    <td>Standard TD</td>
                </tr>
            </tbody>
        </table>

        <h3><code>ul</code> listing</h3>
        <ul class="listing">
            <li><div class="title"><h2><a href="">List item</a></h2></div></li>
            <li><div class="title"><h2><a href="">List item</a></h2></div></li>
            <li><div class="title"><h2><a href="">List item</a></h2></div></li>
        </ul>


        <h3><code>ul</code> listings with multiple columns</h3>
        <ul class="listing">
            <li>
                <div class="row row-flush">
                    <div class="col6 title">
                        <h2><a href="">Something here</a></h2>
                    </div>

                    <small class="col6" style="text-align:end">Something else</small>
                </div>
            </li>
            <li>
                <div class="row row-flush">
                    <div class="col6">
                        <a href="">Something here</a>
                    </div>

                    <small class="col6" style="text-align:end">Something else</small>
                </div>
            </li>
            <li>
                <div class="row row-flush">
                    <div class="col6">
                        <a href="">Something here</a>
                    </div>

                    <small class="col6" style="text-align:end">Something else</small>
                </div>
            </li>
        </ul>

        <h3>Listings used for choosing a list item</h3>
        <table class="listing chooser">
            <thead>
                <tr>
                    <th>Heading 1</th>
                    <th>Heading 2</th>
                    <th>Heading 3</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td class="title">
                        <h2><a href="#">TD with title class</a></h2>
                    </td>
                    <td>Standard TD</td>
                    <td>Standard TD</td>
                </tr>
                <tr class="disabled">
                    <td class="title">
                        <h2>Disabled TD with title class</h2>
                    </td>
                    <td>Standard TD</td>
                    <td>Standard TD</td>
                </tr>
                <tr>
                    <td class="title">
                        <h2><a href="">TD with title class</a></h2>
                    </td>
                    <td>Standard TD</td>
                    <td>Standard TD</td>
                </tr>
            </tbody>
        </table>
    {% endpanel %}

    {% panel id="pagination" heading="Pagination" %}
        {% paginate example_page %}
    {% endpanel %}

    {% panel id="buttons" heading="Buttons" %}
        <p class="help-block help-warning">{% icon name='warning' %}Do not use <code>{% filter force_escape|lower %}<input type="button">{% endfilter %}</code> use <code>{% filter force_escape|lower %}<button type="button"></button>{% endfilter %}</code> instead. This addresses inconsistencies between rendering of buttons across browsers.</p>
        <p>Buttons must have interaction possible (i.e be an input or button element) to get a suitable hover cursor.</p>

        <h3>Basic buttons</h3>

        <a href="#" class="button">button link</a>
        <button class="button" type="button">button element</button>

        <h4>Basic buttons <small>(small)</small></h4>

        <a href="#" class="button button-small">button link</a>
        <button class="button button-small" type="button">button element</button>

        <h3>Secondary buttons</h3>

        <a href="#" class="button button-secondary">button link</a>
        <button class="button button-secondary" type="button">button element</button>

        <h4>Secondary buttons <small>(small)</small></h4>
        <a href="#" class="button button-small button-secondary">button link</a>
        <button class="button button-small button-secondary" type="button">button element</button>

        <h3>Disabled buttons</h3>
        <p><strong>Important</strong>: Adding <code>disabled</code> as a class should be avoided on buttons, instead use the disabled attribute. Some examples below use classes to validate existing styling still works.</p>

        <a href="#" class="button disabled">button link</a>
        <button class="button disabled" type="button">button element</button>
        <button class="button button-secondary disabled" type="button">button secondary</button>

        <h4>Disabled buttons <small>(small)</small></h4>

        <a href="#" class="button button-small disabled">button link</a>
        <button class="button button-small" disabled type="button">button element</button>
        <button class="button button-small button-secondary" disabled type="button">button secondary</button>

        <h3>Bi-color icon buttons with text</h3>
        <p>Note that <code>input</code> elements are not supported by any icon buttons.</p>

        <a href="#" class="button bicolor button--icon">{% icon name="plus" wrapped=1 %}button link</a>
        <button class="button bicolor button--icon" type="button">{% icon name="plus" wrapped=1 %}button element</button>
        <button class="button bicolor button--icon" disabled type="button">{% icon name="plus" wrapped=1 %}button disabled</button>

        <h4>Bi-color secondary icon buttons with text</h4>
        <a href="#" class="button bicolor button--icon button-secondary">{% icon name="plus" wrapped=1 %}button link</a>
        <button class="button bicolor button--icon button-secondary" type="button">{% icon name="plus" wrapped=1 %}button element</button>
        <button class="button bicolor button--icon button-secondary" disabled type="button">{% icon name="plus" wrapped=1 %}button disabled</button>

        <h4>Bi-color icon buttons with text <small>(small)</small></h4>

        <a href="#" class="button button-small bicolor button--icon">{% icon name="plus" wrapped=1 %}button link</a>
        <button class="button button-small bicolor button--icon" type="button">{% icon name="plus" wrapped=1 %}button element</button>
        <button class="button button-small bicolor button--icon" disabled type="button">{% icon name="plus" wrapped=1 %}button disabled</button>

        <h4>Bi-color secondary icon buttons with text <small>(small)</small></h4>
        <a href="#" class="button button-small bicolor button--icon button-secondary">{% icon name="plus" wrapped=1 %}button link</a>
        <button class="button button-small bicolor button--icon button-secondary" type="button">{% icon name="plus" wrapped=1 %}button element</button>
        <button class="button button-small bicolor button--icon button-secondary" disabled type="button">{% icon name="plus" wrapped=1 %}button disabled</button>

        <h3>Icon buttons without text</h3>

        <a href="#" class="button text-replace button--icon">{% icon name="cog" %}button link</a>
        <button class="button text-replace button--icon" type="button">{% icon name="cog" %}button element</button>

        <h4>Icon buttons without text <small>(small)</small></h4>

        <a href="#" class="button button-small text-replace button--icon">{% icon name="cog" %}button link</a>
        <button class="button button-small text-replace button--icon" type="button">{% icon name="cog" %}button element</button>

        <h3>Negative</h3>
        <p>Should not be used with <code>.button-secondary</code> on the same element.</p>

        <a href="#" class="button no">No link</a>
        <button class="button no" type="button">No button</button>
        <button class="button no" disabled type="button">No disabled</button>

        <h4>Negative <small>(small)</small></h4>

        <a href="#" class="button button-small no">No</a>
        <button class="button button-small no" type="button">No</button>
        <button class="button button-small no" disabled type="button">Disabled</button>

        <h3>Buttons with internal loading indicators</h3>
        <p>Currently only <code>button</code> elements are supported.</p>
        <p class="help-block help-warning">{% icon name='warning' %}Note that in some browsers, clicking these buttons minutely affects the appearance of Dropdown buttons, below. This is yet to be resolved.</p>

        <button
            class="button button-longrunning"
            type="button"
            data-controller="w-progress"
            data-action="w-progress#activate"
            data-w-progress-duration-value="5000"
        >
            {% icon name="spinner" %}Click me 5s
        </button>
        <button
            class="button button-longrunning"
            type="button"
            data-controller="w-progress"
            data-action="readystatechange@document->w-progress#activate:once"
            data-w-progress-duration-value="20000"
            disabled
        >
            Disabled until 20s after load
        </button>
        <button
            class="button button-secondary button-longrunning"
            type="button"
            data-controller="w-progress"
            data-action="w-progress#activate"
            data-w-progress-duration-value="5000"
        >
            {% icon name="spinner" %}Click me 5s
        </button>
        <button
            class="button button-small button-longrunning"
            type="button"
            data-controller="w-progress"
            data-action="w-progress#activate"
            data-w-progress-duration-value="5000"
        >
            {% icon name="spinner" %}Click me 5s
        </button>

        <h4>Buttons where the text is replaced on click</h4>
        <button
            class="button button-longrunning"
            type="button"
            data-controller="w-progress"
            data-action="w-progress#activate"
            data-w-progress-active-value="Test"
            data-w-progress-duration-value="5000"
        >
            {% icon name="spinner" %}
            <em data-w-progress-target="label">Click me 5s</em>
        </button>

        <h3>Mixtures</h3>

        <button class="button button--icon text-replace" type="button">{% icon name="check" %}A proper button</button>
        <a href="#" class="button button--icon text-replace white">{% icon name="cog" %}A link button</a>
        <a href="#" class="button button--icon bicolor disabled">{% icon name="check" wrapped=1 %}button link</a>
    {% endpanel %}

    {% panel id="dropdowns" heading="Dropdown buttons" %}

        <div class="row">
            <br />
            <div class="w-flex w-gap-4">
                {% fragment as button %}
                    <a href="" class="button">
                        dropdown
                    </a>
                {% endfragment %}
                {% dropdown_button button=button %}
                    <a class="button" href="#">items should not exceed button width</a>
                {% enddropdown_button %}

                {% fragment as button %}
                    <button type="button" class="button bicolor button--icon">
                        {% icon name="view" wrapped=1 %}icon dropdown
                    </button>
                {% endfragment %}
                {% dropdown_button button=button toggle_icon="arrow-up" %}
                    <a class="button" href="#">first item</a>
                    <a class="button" href="#">second item</a>
                {% enddropdown_button %}

                <button class="button">button for comparison of height</button>
            </div>
        </div>

        <div class="row">
            <br />

            <p>
                Inline dropdown components.
            </p>

            {% dropdown classname="w-inline-block" toggle_icon="arrow-down" toggle_classname="button button-secondary button-small" toggle_label="More" %}
                <a href="/admin/pages/2/move/">{% icon name="arrow-right-full" %} Move</a>
                <a href="/admin/pages/2/copy/">{% icon name="copy" %} Copy</a>
                <a href="/admin/pages/2/delete/">{% icon name="bin" %} Delete</a>
                <a href="/admin/pages/2/unpublish/">{% icon name="resubmit" %} Unpublish</a>
            {% enddropdown %}

            {% dropdown classname="w-inline-block" toggle_icon="dots-horizontal" toggle_aria_label="Actions" %}
                <a href="/admin/pages/2/move/">{% icon name="arrow-right-full" %} Move</a>
            {% enddropdown %}
        </div>
    {% endpanel %}

    {% panel id="dialog" heading="Dialogs" %}

        <div class="w-flex w-gap-4">
            <div>
                {% dialog_toggle classname='button button-primary' dialog_id='dialog-1' text='Simple dialog' %}

                {% dialog icon_name="doc-full-inverse" id="dialog-1" title="Simple dialog" subtitle="This is as simple as it gets 😀" %}
                    <p class="w-base-text">This is an example of a simple dialog with an icon_name, title and subtitle passed to the dialog tag</p>
                {% enddialog %}
            </div>
            <div>
                {% dialog_toggle classname='button button-primary' dialog_id='dialog-2' text='Dialog with info' %}

                {% dialog icon_name="globe" title="Dialog with info" id="dialog-2" subtitle="This is a testing subtitle" message_status="info" message_heading="Here is some info on the thing" message_description="This is a subtext for the message" %}
                    <p class="w-base-text">This dialog message was generated by passing message_status=info as well as message_heading and message_description to the dialog template tag</p>
                {% enddialog %}
            </div>
            <div>
                {% dialog_toggle classname='button button-primary' dialog_id='dialog-3' text='Dialog with success' %}

                {% dialog icon_name="globe" title="Dialog with success" id="dialog-3" subtitle="This is a testing subtitle" message_status="success" message_heading="Success! You've done the thing"  %}
                    <p class="w-base-text">This dialog message was generated by passing message_status=success as well as message_heading to the dialog template tag</p>
                {% enddialog %}
            </div>
            <div>
                {% dialog_toggle classname='button button-primary' dialog_id='dialog-4' text='Dialog with warning' %}

                {% dialog icon_name="globe" title="Dialog with warning" id="dialog-4" subtitle="This is a testing subtitle" message_status="warning" message_heading="There was an issue with the thing" message_description="This is a subtext for the message" %}
                    <p class="w-base-text">This dialog message was generated by passing message_status=warning as well as message_heading and message_description to the dialog template tag</p>
                {% enddialog %}
            </div>
            <div>
                {% dialog_toggle classname='button button-primary' dialog_id='dialog-5' text='Dialog with error' %}

                {% dialog icon_name="globe" title="Dialog with critical error" id="dialog-5" subtitle="This is a testing subtitle" message_status="critical" message_heading="There was an issue with the thing" message_description="This is a subtext for the message" %}
                    <p class="w-base-text">This dialog message was generated by passing message_status=critical as well as message_heading and message_description to the dialog template tag</p>
                {% enddialog %}
            </div>
            <div>
                {% dialog_toggle classname='button button-primary' dialog_id='dialog-6' text='Floating dialog' %}

                {% dialog theme="floating" icon_name="doc-full-inverse" id="dialog-6" title="Floating dialog" subtitle="This is a testing subtitle" %}
                    <p class="w-base-text">This dialog allows other page content to be seen</p>
                {% enddialog %}
            </div>
        </div>
    {% endpanel %}

    {% panel id="header" heading="Header" %}

        {% include "wagtailadmin/shared/header.html" with title=page_title %}

        {% url "wagtailstyleguide" as add_link %}
        {% include "wagtailadmin/shared/header.html" with title=page_title action_url=add_link icon="image" action_text="button" search_url="wagtailimages:index" %}
        <div id="listing-results" style="display: none;">{% comment %} Not implemented, hide content to avoid confusion {% endcomment %}</div>
    {% endpanel %}

    {% panel id="forms" heading="Forms" %}

        <form>
            <ul class="fields">
                {% for field in example_form %}
                    {% if field.name == 'file' %}
                        {% include "wagtailimages/images/_file_field.html" %}
                    {% else %}
                        <li>{% formattedfield field %}</li>
                    {% endif %}
                {% endfor %}
                <li><button type="submit" class="button">{% trans 'Save' %}</button><a href="#" class="button no">{% trans "Delete image" %}</a></li>
            </ul>
        </form>
    {% endpanel %}

    {% panel id="editor" heading="Page editor" %}
        <h3>Tabs</h3>

        <div class="w-tabs" data-tabs>
            <div role="tablist" class="w-tabs__list">
                {% include 'wagtailadmin/shared/tabs/tab_nav_link.html' with tab_id='tab-1' title='Tab 1' %}
                {% include 'wagtailadmin/shared/tabs/tab_nav_link.html' with tab_id='tab-2' title='Tab 2' %}
            </div>
        </div>

        <p>Tabs can also indicate errors:</p>

        <div class="w-tabs" data-tabs>
            <div role="tablist" class="w-tabs__list">
                {% include 'wagtailadmin/shared/tabs/tab_nav_link.html' with tab_id='tab-errors-1' title='Tab 1' errors_count='5' %}
                {% include 'wagtailadmin/shared/tabs/tab_nav_link.html' with tab_id='tab-errors-2' title='Tab 2' errors_count='55' %}
            </div>
        </div>
    {% endpanel %}

    {% panel id="progress" heading="Progress indicators" %}
        <div id="progress-example" class="progress active">
            <div class="bar">60%</div>
        </div>

        <p>&nbsp;</p>

        <div id="progress-example2" class="progress active">
            <div class="bar" style="width: 50%;">50%</div>
        </div>
    {% endpanel %}

    {% panel id="misc" heading="Misc formatters" %}
        <h3>Avatar icons</h3>

        <p>{% avatar %} Avatar normal</p>
        <p>{% avatar size="square" %} Avatar square</p>
        <p>{% avatar size="small" %} Avatar small</p>

        <h3>Status tags</h3>
        <div>{% status "status tag primary" classname="w-status--primary" %}</div>
        <div>{% status "status tag secondary" %}</div>
        <div>{% status "status tag label" classname="w-status--label" %}</div>
        <div>{% status "status tag link" url="https://wagtail.org/" title="wagtail.org" hidden_label="current status" classname="w-status--primary" %}</div>

        <h3>Loading mask</h3>
        <p>Add the following <code>div</code> around any items you wish to display with a spinner overlay and fading out</p>
        <p>Remove the "loading" class to disable the effect</p>
        <div class="loading-mask loading" style="width:200px">
            {% include "wagtailadmin/logo.html"%}
        </div>

        <h3>Image transparency</h3>
        <p>It can be useful to show users the transparent areas of images. Add a transparency checkerboard with the <code>.show-transparency</code> on the <code>img</code> or <code>svg</code> tag thus:</p>
        <div style="width:200px">
            {% include "wagtailadmin/logo.html" with classname="show-transparency" %}
        </div>
    {% endpanel %}

    {% panel id="icons" heading="Icons" %}

        {% for folder, icons in all_icons %}
            {% if folder == "wagtailadmin/icons" %}
                {# Bespoke copy script with good line breaks to review icon update diffs in git. #}
                <!-- Copy this section to update the `icons.md` documentation (wagtail_icons.html file). -->
                <!-- In DevTools: copy($$('[data-icons-table^="wagtailadmin"]')[0].innerHTML.replace(/\s+/g, ' ').replace(/<t/g, '\n<t')) -->
            {% endif %}
            <div class="w-mb-10" data-icons-table="{{ folder }}">
                <!-- Auto-generated with Wagtail’s styleguide. -->
                <table class="w-w-full">
                    <caption><code>register_icons</code> entries from <code>{{ folder }}</code></caption>
                    <thead>
                        <tr>
                            <th scope="col">Visual</th>
                            <th scope="col">Name</th>
                            <th scope="col">Source</th>
                            <th scope="col">File path</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for item in icons %}
                            <tr>
                                <td>{% icon name=item.name classname="w-w-8 w-h-8" %}</td>
                                <td><code>{{ item.name }}</code></td>
                                <td>{{ item.source }}</td>
                                <td><code>{{ item.file_path }}</code></td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        {% endfor %}
    {% endpanel %}
{% endblock %}

{% block extra_js %}
    {{ block.super }}

    {% include "wagtailadmin/pages/_editor_js.html" %}

    {{ example_form.media.js }}
{% endblock %}