{#
In a field layout template, the entry is automatically passed in as the `element` variable.
#}

{% set submission = element.informationRequestSubmission.isIncomplete(null).one() %}
{% set event = element.event.one() %}

{% if submission and event.informationRequestEnabled %}
    {#
    Get the base URL for the entry's current site.
    This naturally handles the [HOSTNAME]/[CURRENT_LANGUAGE]/ format defined in your site settings.
    #}
    {% set baseUrl = element.site.getBaseUrl() | trim('/') %}
    {% set linkUrl = baseUrl ~ '/info-request?sid=' ~ submission.uid %}

    <div class="field" style="margin-top: 15px;">
        <div class="heading">
            <label>Information Request Link</label>
        </div>
        <div class="input">
            <a href="{{ linkUrl }}" target="_blank" class="btn submit" style="display: inline-flex; align-items: center; gap: 5px;">
                Open Front-end Form
            </a>
            <p class="instructions" style="margin-top: 8px; color: var(--gray-600);">
                <strong>Shareable link:</strong> <br>
                <code style="display: inline-flex; align-items: center; gap: 8px; padding: 4px 8px; background-color: rgb(248, 248, 248); border-radius: 3px;">
                    <span id="info-request-link-text">{{ linkUrl }}</span>
                    <button
                        id="copy-link-btn"
                        type="button"
                        style="background: none; border: none; cursor: pointer; padding: 0; color: var(--gray-600); font-size: 14px; padding: 4px; line-height: 1;"
                        title="Copy to clipboard"
                        onclick="copyToClipboard('{{ linkUrl | escape('js') }}', this)">
                        📋
                    </button>
                </code>
            </p>
            <script>
                function copyToClipboard(text, button) {
                    navigator.clipboard.writeText(text).then(function() {
                        const originalText = button.textContent;
                        button.textContent = '✓';
                        button.style.color = 'var(--green)';
                        setTimeout(function() {
                            button.textContent = originalText;
                            button.style.color = 'var(--gray-600)';
                        }, 2000);
                    }).catch(function(err) {
                        console.error('Failed to copy:', err);
                    });
                }
            </script>
        </div>
    </div>
{% endif %}