{% for m in messages %}
{% from 'style.html' import confirm_green_svg, green_cross_close_svg, red_cross_close_svg %}
<!-- todo -->
<section class="py-4" id="messages_{{ m[0] }}" role="alert">
  <div class="container px-4 mx-auto">
    <div class="p-6 text-green-800 rounded-lg bg-green-50 dark:border-green-500 dark:bg-gray-500 dark:text-green-400 rounded-md">
      <div class="flex flex-wrap justify-between items-center -m-2">
        <div class="flex-1 p-2">
          <div class="flex flex-wrap -m-1">
            <div class="w-auto p-1">
            {{ confirm_green_svg | safe }}
            </div>
            <div class="flex-1 p-1">
              <h3 class="infomsg font-medium text-sm">{{ m[1] }}</h3></div>
          </div>
        </div>
        <div class="w-auto p-2">
          <button type="button" class="ms-auto bg-green-50 text-green-500 rounded-lg focus:ring-2 focus:ring-green-400 p-1.5 hover:bg-green-200 inline-flex items-center justify-center h-8 w-8 dark:bg-gray-800 dark:text-green-400 dark:hover:bg-gray-700" data-dismiss-target="#messages_{{ m[0] }}" aria-label="Close"><span class="sr-only">Close</span>
            {{ green_cross_close_svg | safe }}
          </button>
        </div>
      </div>
    </div>
  </div>
</section>
{% endfor %}
{% if err_messages %}
<section class="py-4" id="err_messages_{{ err_messages[0][0] }}" role="alert">
  <div class="container px-4 mx-auto">
    <div class="p-6 bg-red-100 border border-red-200 rounded-md">
      <div class="flex flex-wrap justify-between items-center -m-2">
        <div class="flex-1 p-2">
          <div class="flex flex-wrap -m-1">
            <div class="w-auto p-1">
              {% for m in err_messages %}
              <div class="flex-1 p-1">
                <h3 class="font-medium text-sm text-red-900 error_msg">
                  <p class="error_msg">Error: {{ m[1] }}</p>
                </h3>
              </div>
              {% endfor %}
            </div>
          </div>
        </div>
        <div class="w-auto p-2">
          <button type="button" class="ml-auto bg-red-100 text-red-500 rounded-lg focus:ring-0 focus:ring-red-400 p-1.5 hover:bg-red-200 inline-flex h-8 w-8 focus:outline-none" data-dismiss-target="#err_messages_{{ err_messages[0][0] }}" aria-label="Close">
            <span class="sr-only">Close</span>
            {{ red_cross_close_svg | safe }}
          </button>
        </div>
      </div>
    </div>
  </div>
</section>
{% endif %}