{% extends "demo/_layout" %}

{% set pageTitle = "Custom Formatting" %}

{% block content %}

    <div class="freeform-page-heading">
        <h2>Select a Form</h2>
        <p>Choose a form from below that you'd like to see rendered with the formatting template set inside the form builder. Please be aware that no additional CSS, JS, or libraries will be loaded in this view. It is meant for troubleshooting issues with rendering forms.</p>
    </div>

    {% if forms %}

        <div class="freeform-form-tiles">
        {% for form in forms %}
            {% set submissionCount = freeform.submissions({formId: form.id}).count %}
            {% set spamCount = freeform.submissions({formId: form.id, isSpam: true}).count %}
            <style>.freeform-form-tile-item-{{ form.id }}{border-top:7px solid {{ form.color }}!important;}.freeform-form-tile-item-{{ form.id }}:hover{background:{{ form.color }}!important;}</style>
            <a href="{{ siteUrl }}demo/custom/{{ form.handle }}" class="freeform-form-tile-item freeform-form-tile-item-{{ form.id }}">
                <h3 class="freeform-form-title">{{ form.name }}</h3>
                <p>{{ form.description|truncate(50, '...') }}</p>
                <p class="freeform-submission-count"><b>{{ submissionCount }} submission{% if submissionCount != "1" %}s{% endif %}</b>, {{ spamCount }} spam{% if spamCount != "1" %}s{% endif %}</p>
            </a>
        {% endfor %}
        </div>

    {% else %}

        <div class="freeform-warning-notice{{ colorMode == "dark" ? " freeform-notice-dark" }}">
            Sorry, no forms exist for this site yet.
        </div>

    {% endif %}

{% endblock %}