{% load i18n %}
{% if control_plane.user_info %}
    <div class="control-plane-info-list">
        {% for info in control_plane.user_info %}
            <div class="info-item mb-3">
                <div class="d-flex align-items-center mb-1">
                    <small class="text-muted fw-semibold">{{ info.title }}</small>
                    {% if info.help_text %}
                        <i class="bi bi-info-circle ms-1 text-muted"
                           data-bs-toggle="popover"
                           data-bs-trigger="hover focus"
                           data-bs-placement="top"
                           data-bs-content="{{ info.help_text }}"
                           style="cursor: help;
                                  font-size: 0.875rem"></i>
                    {% endif %}
                </div>
                <div class="bg-light-subtle p-2 rounded">
                    <code class="text-dark">{{ info.content }}</code>
                </div>
            </div>
        {% endfor %}
    </div>
{% endif %}
