{% extends "base.html" %} {% load wagtailcore_tags static %} {% block content %}
<div class="content-blocks">
    <div class="content-block">
        <h2>Page Settings</h2>
        <p><strong>Theme:</strong> {{ page.theme }}</p>
        <p><strong>Layout:</strong> {{ page.layout }}</p>
        <p>
            These settings were chosen using ThumbnailRadioSelect widgets in the
            Wagtail admin!
        </p>
    </div>

    <div class="content-block">
        <h2>Directory Icon</h2>
        {% if page.directory_icon %} {% get_static_prefix as STATIC_PREFIX %}
        <div class="icon-display">
            <img
                src="{{ STATIC_PREFIX }}icons/{{ page.directory_icon }}.svg"
                alt="{{ page.directory_icon }}"
                style="width: 48px; height: 48px"
            />
            <p>
                <em>Selected: <code>{{ page.directory_icon }}</code></em>
            </p>
        </div>
        {% else %}
        <p class="icon-placeholder">
            <em
                >No icon selected — edit the page to pick one from the directory
                picker.</em
            >
        </p>
        {% endif %}
        <p class="field-info">
            <em
                >Icons scanned automatically from
                <code>static/icons/</code>
            </em>
        </p>
    </div>

    {% for block in page.content %} {% if block.block_type == 'heading' %}
    <div class="content-block">
        <h2>{{ block.value }}</h2>
    </div>

    {% elif block.block_type == 'paragraph' %}
    <div class="content-block">{{ block.value|richtext }}</div>

    {% elif block.block_type == 'icon_block' %}
    <div class="content-block">
        <h3>Icon Block</h3>
        <div class="icon-display">
            {% include "home/icons/inline/"|add:block.value.icon|add:".html" %}
            <span>{{ block.value.text|default:"" }}</span>
        </div>
    </div>

    {% elif block.block_type == 'color_scheme' %}
    <div class="content-block">
        <h3>Color Scheme Block</h3>
        <div class="color-scheme-block color-scheme-{{ block.value.scheme }}">
            {% if block.value.title %}
            <h4>{{ block.value.title }}</h4>
            {% endif %} {% if block.value.content %}
            <p>{{ block.value.content }}</p>
            {% endif %}
        </div>
        <p><em>Selected scheme: {{ block.value.scheme }}</em></p>
    </div>

    {% elif block.block_type == 'button_style' %}
    <div class="content-block">
        <h3>Button Style Block</h3>
        <a
            href="{{ block.value.url|default:'#' }}"
            class="button-display button-{{ block.value.style }}"
        >
            {{ block.value.text }}
        </a>
        <p class="style-info"><em>Style: {{ block.value.style }}</em></p>
    </div>

    {% elif block.block_type == 'optional_icon' %}
    <div class="content-block">
        <h3>Optional Icon Block (required=False)</h3>
        <div class="icon-heading-display">
            {% if block.value.icon %}
            <div class="icon-wrapper">
                {% include "home/icons/inline/"|add:block.value.icon|add:".html"
                %}
            </div>
            {% else %}
            <div class="icon-placeholder">No icon selected</div>
            {% endif %}
            <h4>{{ block.value.heading }}</h4>
        </div>
        <p class="field-info">
            <em>Icon field is optional - can be left blank</em>
        </p>
    </div>

    {% elif block.block_type == 'required_icon' %}
    <div class="content-block">
        <h3>Required Icon Block (required=True)</h3>
        <div class="icon-heading-display">
            <div class="icon-wrapper">
                {% include "home/icons/inline/"|add:block.value.icon|add:".html"
                %}
            </div>
            <h4>{{ block.value.heading }}</h4>
        </div>
        <p class="field-info">
            <em>Icon field is required - must select an icon</em>
        </p>
    </div>

    {% elif block.block_type == 'one_color_icon_image' %}
    <div class="content-block">
        <h3>One-Color Icon Block (image-based)</h3>
        <div class="icon-display">
            {% get_static_prefix as STATIC_PREFIX %} {% if block.value.icon == 'right' %}
            <img
                src="{{ STATIC_PREFIX }}icons/arrows/right-16.svg"
                alt="{{ block.value.icon }}"
                style="width: 32px; height: 32px"
            />
            {% else %}
            <img
                src="{{ STATIC_PREFIX }}icons/arrows/{{ block.value.icon }}.svg"
                alt="{{ block.value.icon }}"
                style="width: 32px; height: 32px"
            />
            {% endif %}
            <span>{{ block.value.text|default:"" }}</span>
        </div>
        <p class="field-info">
            <em>thumbnail_is_one_color=True (image-based)</em>
        </p>
    </div>

    {% elif block.block_type == 'one_color_icon_template' %}
    <div class="content-block">
        <h3>One-Color Icon Block (template-based)</h3>
        <div class="icon-display">
            {% include "home/icons/inline/"|add:block.value.icon|add:".html" %}
            <span>{{ block.value.text|default:"" }}</span>
        </div>
        <p class="field-info">
            <em
                >thumbnail_is_one_color=True (template-based) — in the
                Wagtail admin, this template's fill="currentColor" SVG is
                tinted to match the surrounding text color. Here on the
                front end it just renders as authored, with no tinting
                applied.</em
            >
        </p>
    </div>

    {% elif block.block_type == 'directory_icon' %}
    <div class="content-block">
        <h3>Directory Icon Block</h3>
        {% if block.value %}
        <div class="icon-display">
            {% get_static_prefix as STATIC_PREFIX %}
            <img
                src="{{ STATIC_PREFIX }}icons/{{ block.value }}.svg"
                alt="{{ block.value }}"
                style="width: 48px; height: 48px"
            />
            <p>
                <em>Selected: <code>{{ block.value }}</code></em>
            </p>
        </div>
        {% else %}
        <p class="icon-placeholder"><em>No icon selected</em></p>
        {% endif %}
        <p class="field-info">
            <em>Icons loaded automatically from <code>static/icons/</code></em>
        </p>
    </div>
    {% endif %} {% endfor %}
</div>

{% if not page.content %}
<div class="content-block">
    <h2>Welcome!</h2>
    <p>
        This is a demo of the Wagtail Thumbnail Choice Block. To see it in
        action:
    </p>
    <ol class="welcome-list">
        <li>Go to the Wagtail admin at <a href="/admin/">/admin/</a></li>
        <li>Edit this page</li>
        <li>Try changing the Theme and Layout settings</li>
        <li>Add content blocks with various thumbnail choice options</li>
    </ol>
</div>
{% endif %} {% endblock %}