{#
  Twig store demo component, authored as a native .twig file.

  Shares the `framework` Nano Store with the other framework islands through
  `window.Stores['framework']`, which the page registers before the islands
  hydrate. This lets a string-rendered Twig island stay in sync with the
  binding-based islands (React, Vue, ...).

  Props:
  - logo: the Twig logo URL, passed in from the .astro page
#}

<div class="card twig-store">
  <strong>Twig Store</strong>
  <div class="card-content">
    {% if logo %}<img alt="Twig logo" height="150" src="{{ logo }}" />{% endif %}
    <div>
      <strong>Value:</strong>
      <div class="framework-value"></div>
    </div>
    <div>
      <button class="card-btn select-btn">Select Twig</button>
    </div>
  </div>
  <script>
    (function () {
      const container = (document.currentScript && document.currentScript.parentElement)
        || document.querySelector('.twig-store');
      const valueEl = container.querySelector('.framework-value');
      const btn = container.querySelector('.select-btn');

      const store = window.Stores && window.Stores['framework'];

      if (store) {
        store.subscribe(function (value) {
          valueEl.textContent = value;
        });
      }

      btn.addEventListener('click', function () {
        if (store) store.set('Twig');
      });
    })();
  </script>
</div>