{#
/**
 * @file
 * Default theme implementation to display the visual editor.
 *
 * Available variables:
 * - url: The url to preview site.
 *
 * @ingroup themeable
 */
#}
{{ attach_library('nodehive_core/node') }}

<div class="visualeditor-toolbar">
	<div class="visualeditor-toolbar__left">
		<button class="nodehive-content-browser sidebar-toggle" title="{{ 'Content Browser'|t }}">
			<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
				<rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
				<line x1="9" y1="3" x2="9" y2="21"></line>
			</svg>
		</button>
	</div>

	<div class="visualeditor-toolbar__center">
		<div class="viewport-buttons">
			<button class="resize-button is-active" data-size="100%" title="{{ 'Full width'|t }}">
				<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
					<path d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3"></path>
				</svg>
			</button>
			<button class="resize-button" data-size="1400px" data-height="900px" title="{{ 'Desktop'|t }}">
				<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
					<rect x="2" y="3" width="20" height="14" rx="2" ry="2"></rect>
					<line x1="8" y1="21" x2="16" y2="21"></line>
					<line x1="12" y1="17" x2="12" y2="21"></line>
				</svg>
			</button>
			<button class="resize-button" data-size="768px" data-height="1024px" title="{{ 'Tablet'|t }}">
				<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
					<rect x="4" y="2" width="16" height="20" rx="2" ry="2"></rect>
					<line x1="12" y1="18" x2="12.01" y2="18"></line>
				</svg>
			</button>
			<button class="resize-button" data-size="375px" data-height="812px" title="{{ 'Mobile'|t }}">
				<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
					<rect x="5" y="2" width="14" height="20" rx="2" ry="2"></rect>
					<line x1="12" y1="18" x2="12.01" y2="18"></line>
				</svg>
			</button>
		</div>
	</div>

	<div class="visualeditor-toolbar__right">
		{% if node_edit_url %}
			<a href="{{ node_edit_url }}?destination={{ current_path_with_query }}" class="toolbar-button toolbar-button--primary">
				<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
					<path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path>
					<path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path>
				</svg>
				<span>{{ 'Edit'|t }}</span>
			</a>
		{% endif %}
		<a href="{{ url }}" target="_blank" class="toolbar-button toolbar-button--secondary">
			<span>{{ 'Visit'|t }} ↗</span>
		</a>
		{% if frontend_login_url %}
			<a href="?url={{ frontend_login_url }}" class="toolbar-button toolbar-button--secondary">
				<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
					<path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4"></path>
					<polyline points="10 17 15 12 10 7"></polyline>
					<line x1="15" y1="12" x2="3" y2="12"></line>
				</svg>
				<span>{{ 'Frontend Login'|t }}</span>
			</a>
		{% endif %}
	</div>
</div>

<div class="nodehive-preview">
	<div class="visualeditor-content-sidebar">
		{{ recent_edit_form }}
	</div>
	<div class="visualeditor">
		<div class="visualeditor-preview">
			<div class="visualeditor-browser-chrome">
				<div class="visualeditor-addressbar">
					<span class="visualeditor-dots"><span></span><span></span><span></span></span>
					<span class="visualeditor-url" id="visualeditor-url">{{ url }}</span>
				</div>
				<iframe id="nodehive-visualeditor" class="nodehive-iframe mx-auto" width="100%" height="500" src="{{ url }}"></iframe>
			</div>
		</div>
	</div>
</div>
