{% extends "gadjo/widget.html" %}
{% load i18n %}

{% block widget-control %}
  <div class="layout-selection-widget">
    {{ block.super }}
    <a id="{{ field.id_for_label }}_goto_layout" data-base-href="/manage/layouts/layout/by-uuid/"
       href="/manage/layouts/layout/by-uuid/{{ field.value }}/"
       class="button" title="{% trans 'Go to layout' %}"
       {% if not field.value or field.value|startswith:"_" %}hidden{% endif %}>↗</a>
  </div>
  <script>
    (function() {
      const layoutSelect = document.getElementById('{{ field.id_for_label }}')
      const goToLayoutLink = document.getElementById('{{ field.id_for_label }}_goto_layout')
      layoutSelect.addEventListener('change', function() {
        const newValue = layoutSelect.value
        goToLayoutLink.href = goToLayoutLink.dataset.baseHref + newValue + '/'
        if (newValue.startsWith('_')) {
          goToLayoutLink.setAttribute('hidden', 'hidden')
        } else {
          goToLayoutLink.removeAttribute('hidden')
        }
      })
    })()
  </script>
{% endblock %}