{% extends "base_modal.html" %}

{% block id %}infoModal{% endblock %}

{% block title %}ℹ️ {{ _("HINT") }}{% endblock %}

{% block body %}
    <h5 id="infoModalTitle"
        class="text-base font-semibold text-slate-800 mb-2">
    </h5>

    <p id="infoModalText"
       class="text-sm text-slate-700 leading-relaxed mb-3">
    </p>

    <div id="infoModalBody"
         class="text-sm text-slate-700 space-y-2">
    </div>
{% endblock %}

{% block footer %}
    <button type="button"
            data-modal-close
            class="inline-flex items-center justify-center
                   px-4 py-2 rounded-lg
                   border border-slate-300
                   text-slate-600 text-sm font-medium
                   hover:bg-slate-200
                   focus:outline-none focus:ring-2 focus:ring-slate-300
                   transition">
        {{ _("UNDERSTOOD") }}
    </button>
{% endblock %}