{% macro example(msg, channelName, open=false) %}

<form>
  <h5 class="examples-uid text-orange mt-4">{{msg.uid()}}</h5>
  {% if msg.payload() %}
    <div class="payload-examples mb-4 {% if open %}is-open{% endif %}">
      <div class="{% if  msg.payload() | isExpandable %}js-prop cursor-pointer {% endif %} flex property">
        <span class="px-2 mr-2 text-grey-lightest text-sm border rounded focus:outline-none cursor-pointer">Payload</span>
        {% if msg.payload() | isExpandable %}
          <svg class="expand" version="1.1" viewBox="0 0 24 24" x="0"
            xmlns="http://www.w3.org/2000/svg" y="0">
            <polygon points="17.3 8.3 12 13.6 6.7 8.3 5.3 9.7 12 16.4 18.7 9.7 "></polygon>
          </svg>
        {% endif %}
      </div>
      <div class="children payload-examples mt-4">
        {% if msg | getPayloadExamples | length %}
          {% for ex in msg | getPayloadExamples %}
            <h6 class="text-xs font-bold text-grey-darker">Example #{{loop.index}}</h6>
            <pre class="hljs mb-4 border border-grey-darkest rounded"><code>{{ex | dump(2) | safe }}</code></pre>
          {% endfor %}
        {% elif msg.payload() %}
        <pre class="hljs mb-4 border border-grey-darkest rounded"><code>{{ msg.payload().json() | generateExample | safe }}</code></pre>
        <h6 class="text-xs font-bold text-grey-darker italic">This example has been generated automatically.</h6>
        {% endif %}
      </div>
    </div>
  {% endif %}

  {% if msg.headers() %}
    <div class="headers-examples mb-4 {% if open %}is-open{% endif %}">
      <div class="{% if  msg.payload() | isExpandable %}js-prop cursor-pointer {% endif %} flex property">
        <span class="px-2 mr-2 text-grey-lightest text-sm border rounded focus:outline-none cursor-pointer">Headers</span>
        {% if msg.payload() | isExpandable %}
          <svg class="expand" version="1.1" viewBox="0 0 24 24" x="0"
            xmlns="http://www.w3.org/2000/svg" y="0">
            <polygon points="17.3 8.3 12 13.6 6.7 8.3 5.3 9.7 12 16.4 18.7 9.7 "></polygon>
          </svg>
        {% endif %}
      </div>
      <div class="children headers-examples mt-4">
        {% if msg | getHeadersExamples | length %}
          {% for ex in msg | getHeadersExamples %}
            <h6 class="text-xs font-bold text-grey-darker">Example #{{loop.index}}</h6>
            <pre class="hljs mb-4 border border-grey-darkest rounded"><code>{{ ex | dump(2) | safe  }}</code></pre>
          {% endfor %}
        {% elif msg.headers() %}
        <pre class="hljs mb-4 border border-grey-darkest rounded"><code>{{ msg.headers().json() | generateExample | safe }}</code></pre>
        <h6 class="text-xs font-bold text-grey-darker italic">This example has been generated automatically.</h6>
        {% endif %}
      </div>
    </div>
  {% endif %}
</form>

{% endmacro %}
