{% extends "django_spire/base/base.html" %}

{% block base_head_title %}
    <title>{{ width }} x {{ height }}</title>
{% endblock %}

{% block base_body_content %}
    <div class="p-4 text-center w-100">
        <h1 class="mb-4 text-primary">"{{ signage.name }}" Signage Testing</h1>

        <h3>No Zoom ({{ width }} x {{ height }})</h3>
        <iframe class="border border-2 border-dark mb-5 shadow" src="{% url 'django_spire:metric:visual:signage:page:display' key=signage.key %}"
                width="{{ width }}" height="{{ height }}"></iframe>

        <h3>Medium Zoom ({{ width }} x {{ height }})</h3>
        <iframe class="border border-2 border-dark mb-5 shadow" src="{% url 'django_spire:metric:visual:signage:page:display' key=signage.key %}?zoom=medium"
                width="{{ width }}" height="{{ height }}"></iframe>

        <h3>High Zoom ({{ width }} x {{ height }})</h3>
        <iframe class="border border-2 border-dark mb-5 shadow" src="{% url 'django_spire:metric:visual:signage:page:display' key=signage.key %}?zoom=high"
                width="{{ width }}" height="{{ height }}"></iframe>
    </div>
{% endblock %}