<img src="{{ image }}" class="gutenplatz-logo">
<div class="w-content">
  <div id="gutenplatz-blocks"></div>
</div>
<div class="gutenplatz w-content" data-server-url="{{ server_url }}" data-rest-url="{{ rest_url }}" id="gutenplatz">
  <script id="gutenplatz-data" type="text/javascript">
    {{ blocks|json_encode()|raw }}
  </script>
  <div class="gutenplatz-intro">
    {% if not options.gutenplatzApiKey %}
      <div class="gutenplatz-apiCopy">
        <p>To be able to add Gutenplatz blocks to your site, you need to get an API key.</p>
        <p>Simply <a href="https://gutenplatz.com/auth/register">signup now</a> to get your free API Key</p>
      </div>
    {% endif %}
    <form method="POST" class="gutenplatz-options">
      {{ nonceField | raw }}
      <input name="gutenplatzApiKey" type="text" id="gutenplatzApiKey" placeholder="API Key" value="{{ options.gutenplatzApiKey|e }}" class="regular-text">
      <input type="submit" value="{% if not options.gutenplatzApiKey %}Add Key{% else %}Update Key{% endif %}" class="button button-primary">
    </form>
  </div>
</div>