form-field-url-preview.html

{%- capture this_button_id -%}{{ include.label | slugify }}-event-url-follow-button{%- endcapture -%}

<fieldset 
    class="
        {% include patterns/form-field-auto-save-classes %}
        group 
        url
        {{ include.class }}
        {% if include.depends %}pat-depends{% endif %}"
    {% if include.action %}
        data-pat-inject="
            url: {{ include.action }}; 
            source: #{{this_button_id}}::element;
            target: #{{this_button_id}}::element"
    {% endif %}
    {% if include.depends %}
        data-pat-depends="
        {{ include.depends }}; 
        transition: slide"
    {% endif %}>
    <legend>
        {% include patterns/i18n id=include.label %}{% include patterns/form-required.html %} 
    </legend>

    <span
        class="button-field type-url">
        <input 
            {% if include.required == true %}required="required"{% endif %} 
            {% if include.state == 'disabled' %}disabled{% endif %}  
            {% if include.size %}size="{{ include.chars }}"{% endif %}
            {% if include.placeholder %}placeholder="{{ site.data[ui_data_path].ui[include.placeholder][site.data.config.lang] }}"{% endif %}
            {% if include.maxlength %}maxlength="{{ include.maxlength }}"{% endif %} 
            type="url"
            class="{% if include.autofocus %}pat-autofocus{% endif %}"
            name="{{ include.name }}" 
            value="{{ include.value }}" 
            /> 
        <a
            class="follow"
            target="_blank"
            id="{{ this_button_id }}"
            title="Visit this URL"
            {% if page.event_url %}href="{{ page.event_url }}"{% endif %}>Follow</a>
    </span>

    {% include patterns/form-has-changes.html %}

    {% if include.help %}
        {% include patterns/form-help.html
            content=include.help 
            more=include.help_more %}
    {% endif %}
    
    {% include patterns/form-message.html message=include.message %}

</fieldset>