<div class="rtds-dialog rtds-dialog--profile rtds-modal-dialog--s rtds-modal-dialog--inverse ">
    <div role="dialog" id="dialog1" aria-labelledby="dialog1Label" aria-modal="true" class="rtds-hidden">

        <div class="rtds-dialog__header">
            <h2 id="dialog1Label" class="rtds-dialog__title rtds-heading-5">

                Profilo Utente
            </h2>

            <button type="button" class="rtds-btn 
    rtds-btn--icon rtds-btn--l rtds-dialog__close-button" id="close-profile-dialog-button" onclick="closeDialog(this)"><svg class="rtds-icon rtds-fill-current rtds-w-6 rtds-h-6 md:rtds-w-8 md:rtds-h-8" aria-hidden="true" focusable="false" role="img">
                    <use href="../../icons.svg#mini--x-mark" />
                </svg>
                <span class="rtds-sr-only">

                    Chiudi la modale del profilo
                </span>

            </button>

        </div>

        <div class="rtds-dialog__content" tabindex="0">

            <div class="rtds-profile-content rtds-space-y-2">
                <div class="rtds-profile-header">
                    <div class="rtds-flex rtds-items-center rtds-gap-4">
                        <div class="rtds-user-avatar">
                            <img alt="" width="56" height="56" src="/images/user-placeholder.png" class="rtds-user-avatar__image">
                        </div>
                        <h3 class="rtds-heading-3">Mario Rossi</h3>
                    </div>
                </div>
                <div class="rtds-profile-details">
                    <div class="rtds-profile-section">
                        <h4 class="rtds-sr-only">Informazioni</h4>
                        <dl class="rtds-profile-contact-list rtds-divide-y rtds-divide-gray-02">
                            <div class="rtds-py-4">
                                <dt class="rtds-text-sm md:rtds-text-base rtds-font-bold">Struttura</dt>
                                <dd>ASSISTENZA AL DIFENSORE CIVICO E AI GARANTI. ASSISTENZA GENERALE AL CORECOM. BIBLIOTECA E DOCUMENTAZIONE.</dd>
                            </div>
                            <div class="rtds-py-4">
                                <dt class="rtds-text-sm md:rtds-text-base rtds-font-bold">Qualifica</dt>
                                <dd>ISTRUTTORE SUPPORTO ORGANI E ORGANISMI CONSILIARI</dd>
                            </div>

                            <div class="rtds-py-4">
                                <dt class="rtds-text-sm md:rtds-text-base rtds-font-bold">Indirizzo</dt>
                                <dd>PALAZZO BASTOGI VIA CAVOUR 18 - 50129 FIRENZE</dd>
                            </div>

                            <div class="rtds-py-4">
                                <dt class="rtds-text-sm md:rtds-text-base rtds-font-bold">Stanza</dt>
                                <dd>019</dd>
                            </div>

                            <div class="rtds-py-4">
                                <dt class="rtds-text-sm md:rtds-text-base rtds-font-bold">Telefono</dt>
                                <dd>
                                    <a href="" class="rtds-link rtds-content-02">
                                        02 123456789

                                    </a>
                                </dd>
                            </div>
                            <div class="rtds-py-4">
                                <dt class="rtds-text-sm md:rtds-text-base rtds-font-bold">Email</dt>
                                <dd>
                                    <a href="" class="rtds-link rtds-content-02">
                                        mario.rossi@example.com

                                    </a>
                                </dd>
                            </div>
                        </dl>
                    </div>
                </div>
            </div>

        </div>

    </div>
</div>
{% extends "@modal-dialog" %}

{% block classes %} rtds-dialog--profile rtds-modal-dialog--s rtds-modal-dialog--inverse {{ classes }}{% endblock %}

{% block contentInner %}
    <div class="rtds-profile-content rtds-space-y-2">
        <div class="rtds-profile-header">
            <div class="rtds-flex rtds-items-center rtds-gap-4">
                {% render '@user-avatar', userAvatar, true %}
                <h3 class="rtds-heading-3">{{ profileName }}</h3>
            </div>
        </div>
        <div class="rtds-profile-details">
               <div class="rtds-profile-section">
                    <h4 class="rtds-sr-only">Informazioni</h4>
                    <dl class="rtds-profile-contact-list rtds-divide-y rtds-divide-gray-02">
                        <div class="rtds-py-4">
                            <dt class="rtds-text-sm md:rtds-text-base rtds-font-bold">Struttura</dt>
                        <dd>ASSISTENZA AL DIFENSORE CIVICO E AI GARANTI. ASSISTENZA GENERALE AL CORECOM. BIBLIOTECA E DOCUMENTAZIONE.</dd>
                        </div>
                        <div class="rtds-py-4">
                            <dt class="rtds-text-sm md:rtds-text-base rtds-font-bold">Qualifica</dt>
                            <dd>ISTRUTTORE SUPPORTO ORGANI E ORGANISMI CONSILIARI</dd>
                        </div>
                        
                        <div class="rtds-py-4">
                            <dt class="rtds-text-sm md:rtds-text-base rtds-font-bold">Indirizzo</dt>
                            <dd>PALAZZO BASTOGI VIA CAVOUR 18 - 50129 FIRENZE</dd>
                        </div>
                        
                        <div class="rtds-py-4">
                            <dt class="rtds-text-sm md:rtds-text-base rtds-font-bold">Stanza</dt>
                            <dd>019</dd>
                        </div>

                        <div class="rtds-py-4">
                            <dt class="rtds-text-sm md:rtds-text-base rtds-font-bold">Telefono</dt>
                            <dd>
                            {% render '@link', 
                                {
                                label: '02 123456789',
                                href: 'tel:+3902123456789',
                                classes: 'rtds-content-02' 
                                },
                                true
                            %}
                        </dd>
                        </div>
                        <div class="rtds-py-4">
                            <dt class="rtds-text-sm md:rtds-text-base rtds-font-bold">Email</dt>
                            <dd>
                                {% render '@link', 
                                    {
                                    label: 'mario.rossi@example.com',
                                    href: 'mailto:mario.rossi@example.com',
                                    classes: 'rtds-content-02' 
                                    },
                                    true
                                %}
                            </dd>
                        </div>
                    </dl>
                </div>
        </div>
    </div>
{% endblock %} 

{% block actions %}
{% endblock actions %}
{
  "dialogId": "dialog1",
  "label": "Profilo Utente",
  "profileName": "Mario Rossi",
  "profileRole": "Sviluppatore Frontend",
  "userAvatar": {
    "path": "/images/user-placeholder.png",
    "alt": ""
  },
  "titleClasses": "rtds-heading-5",
  "buttons": [
    {
      "label": "Chiudi",
      "callback": "closeDialog(this)",
      "classes": "rtds-btn--outlined"
    },
    {
      "label": "Modifica Profilo",
      "classes": "rtds-btn--primary"
    }
  ],
  "closeButton": {
    "variant": "--icon",
    "context": {
      "label": "Chiudi la modale del profilo",
      "icon": "mini--x-mark",
      "id": "close-profile-dialog-button",
      "classes": "rtds-btn--l rtds-dialog__close-button",
      "iconSize": "rtds-w-6 rtds-h-6 md:rtds-w-8 md:rtds-h-8",
      "callback": "closeDialog(this)"
    }
  }
}

No notes defined.