<xf:title>{{ phrase('test_url_unfurling') }}</xf:title>
<xf:description>{{ phrase('this_tool_helps_diagnose_errors_relating_to_url_unfurl_system') }}</xf:description>

<xf:if is="$error">
	<div class="blockMessage blockMessage--error">
		{{ phrase('following_error_occurred_while_fetching_metadata_from_url_x', {'url': $url}) }}<br />
		<pre class="u-preWrap">{$error}</pre>
	</div>
</xf:if>

<xf:form action="{{ link('tools/test-url-unfurling') }}" class="block">
	<div class="block-container">
		<div class="block-body">
			<xf:textboxrow name="url" type="url"
				label="{{ phrase('url') }}" value="{$url}" />
		</div>
		<xf:submitrow submit="{{ phrase('run_test') }}" />
	</div>
</xf:form>

<xf:if contentcheck="true">
	<div class="block">
		<div class="block-container">
		<xf:contentcheck>
			<xf:if is="$results">
				<h2 class="block-header">{{ phrase('results') }}</h2>
				<div class="block-body">
					<xf:formrow label="{{ phrase('title') }}">
						{{ $results.title ?: phrase('n_a') }}
					</xf:formrow>

					<xf:formrow label="{{ phrase('description') }}">
						{{ $results.description ?: phrase('n_a') }}
					</xf:formrow>

					<xf:formrow label="{{ phrase('image') }}">
						<xf:if is="$results.image_url">
							<img src="{$results.image_url}" style="width: 100px" />
							<div class="formRow-explain">
								{{ phrase('url:') }} <a href="{$results.image_url}" target="_blank">{$results.image_url}</a>
							</div>
						<xf:else />
							{{ phrase('n_a') }}
						</xf:if>
					</xf:formrow>

					<xf:formrow label="{{ phrase('icon') }}">
						<xf:if is="$results.favicon_url">
							<img src="{$results.favicon_url}" style="width: 32px" />
							<div class="formRow-explain">
								{{ phrase('url:') }} <a href="{$results.favicon_url}" target="_blank">{$results.favicon_url}</a>
							</div>
						<xf:else />
							{{ phrase('n_a') }}
						</xf:if>
					</xf:formrow>
				</div>
			</xf:if>

			<xf:if is="$body">
				<xf:if is="$results">
					<h2 class="block-minorHeader">
						<span class="collapseTrigger collapseTrigger--block" data-xf-click="toggle" data-target="< :up :next">
							{{ phrase('raw_response') }}
						</span>
					</h2>
				<xf:else />
					<h2 class="block-header">{{ phrase('raw_response') }}</h2>
				</xf:if>
				<div class="block-body {{ $results ? 'block-body--collapsible' : '' }}">
					<xf:macro id="public:prism_macros::setup" />

					<xf:formrow label="{{ phrase('code_language.html') }}" rowtype="fullWidth noLabel">
						{{ phrase('following_html_is_what_was_fetched_within_default_time_and_size') }}

						<div class="bbCodeBlock bbCodeBlock--screenLimited bbCodeBlock--code">
							<div class="bbCodeBlock-content" dir="ltr">
								<pre class="bbCodeCode" dir="ltr"><code>{$body}</code></pre>
							</div>
						</div>
					</xf:formrow>
				</div>
			</xf:if>
		</xf:contentcheck>
		</div>
	</div>
</xf:if>
