<% let childProfiles = currentProfile.getChildProfiles(); %>
<div class="row">
    <div class="col" style="line-height: 68px">
        <%= currentProfile.getName() %>
    </div>
    <div data-type="appointment-rsvp-container"
         data-appointment-id="<%= a.getId() %>"
         class="col-appointment-response">

        <div class="container-rsvp-icon">

            <section data-type="section-rsvp-icon-unchecked"
                     style="display: <%= ( a.hasProfileIdAccepted( currentProfile.getId() ) || a.isProfileIdWaiting( currentProfile.getId() ) ) ? 'none' : 'block' %>">
                <button type="button"
                        data-type="rsvp-button-accept"
                        data-appointment-id="<%= a.getId() %>"
                        class="btn btn-rsvp-not-selected btn-circle btn-xl">
                    <i class="fas fa-thumbs-up"></i>
                </button>
            </section>

            <section data-type="section-rsvp-icon-loading"
                     style="display: none">
                <div class="rsvp-loading-icon">
                    <i class="fas fa-circle-notch fa-spin"></i>
                </div>
            </section>

            <section data-type="section-rsvp-icon-accepted"
                     style="display: <%= a.hasProfileIdAccepted( currentProfile.getId() ) ? 'block' : 'none' %>">
                <div style="position:relative; width:52px; height:40px;">
                    <div data-type="rsvp-button-recall"
                         data-appointment-id="<%= a.getId() %>"
                         style="position: absolute;width:40px; height:40px;top:0;right:0">
                        <svg class="rsvp-checkmark"
                             xmlns="http://www.w3.org/2000/svg"
                             viewBox="0 0 52 52">
                            <circle class="rsvp-checkmark__circle" cx="26" cy="26" r="25" fill="none"/>
                            <path class="rsvp-checkmark__check" fill="none" d="M14.1 27.2l7.1 7.2 16.7-16.8"/>
                        </svg>
                    </div>
                </div>
            </section>

            <section data-type="section-rsvp-icon-waiting"
                     style="display: <%= a.isProfileIdWaiting( currentProfile.getId() ) ? 'block' : 'none' %>">
                <div style="position:relative; width:52px; height:40px;">
                    <div data-type="rsvp-button-recall"
                         data-appointment-id="<%= a.getId() %>"
                         style="position: absolute;width:40px; height:40px;top:0;right:0">
                        <svg class="rsvp-checkmark rsvp-chcekmark-waiting"
                             xmlns="http://www.w3.org/2000/svg"
                             viewBox="0 0 52 52">
                            <circle class="rsvp-checkmark__circle rsvp-checkmark__circle-waiting" cx="26" cy="26" r="25" fill="none"/>
                            <path class="rsvp-checkmark__check" fill="none" d="M14.1 27.2l7.1 7.2 16.7-16.8"/>
                        </svg>
                    </div>
                </div>
            </section>

        </div>
    </div>
</div>

<% for ( let ci = 0; ci < childProfiles.length; ci++ )  {   %>
    <hr style="margin-top: 0; margin-bottom: 0" />
    <div class="row">
        <div class="col" style="line-height: 68px">
            <i class="<%= currentProfile.getChildProfileIconByType(childProfiles[ ci ].type ) %>"></i>&nbsp;<%= childProfiles[ ci ].name %>
        </div>
        <div data-type="appointment-rsvp-container"
             data-appointment-id="<%= a.getId() %>"
             class="col-appointment-response">

            <div class="container-rsvp-icon">

                <section data-type="section-rsvp-icon-unchecked"
                         style="display: <%= ( a.hasProfileIdAccepted( currentProfile.getId(), childProfiles[ ci ].id ) || a.isProfileIdWaiting( currentProfile.getId(), childProfiles[ ci ].id ) ) ? 'none' : 'block' %>">
                    <button type="button"
                            data-type="rsvp-button-accept"
                            data-appointment-id="<%= a.getId() %>"
                            data-child-profile-id="<%= childProfiles[ ci ].id %>"
                            class="btn btn-rsvp-not-selected btn-circle btn-xl">
                        <i class="fas fa-thumbs-up"></i>
                    </button>
                </section>

                <section data-type="section-rsvp-icon-loading"
                         style="display: none">
                    <div class="rsvp-loading-icon">
                        <i class="fas fa-circle-notch fa-spin"></i>
                    </div>
                </section>

                <section data-type="section-rsvp-icon-accepted"
                         style="display: <%= a.hasProfileIdAccepted( currentProfile.getId(), childProfiles[ ci ].id ) ? 'block' : 'none' %>">
                    <div style="position:relative; width:52px; height:40px;">
                        <div data-type="rsvp-button-recall"
                             data-appointment-id="<%= a.getId() %>"
                             data-child-profile-id="<%= childProfiles[ ci ].id %>"
                             style="position: absolute;width:40px; height:40px;top:0;right:0">
                            <svg class="rsvp-checkmark"
                                 xmlns="http://www.w3.org/2000/svg"
                                 viewBox="0 0 52 52">
                                <circle class="rsvp-checkmark__circle" cx="26" cy="26" r="25" fill="none"/>
                                <path class="rsvp-checkmark__check" fill="none" d="M14.1 27.2l7.1 7.2 16.7-16.8"/>
                            </svg>
                        </div>
                    </div>
                </section>

                <section data-type="section-rsvp-icon-waiting"
                         style="display: <%= a.isProfileIdWaiting( currentProfile.getId(), childProfiles[ ci ].id ) ? 'block' : 'none' %>">
                    <div style="position:relative; width:52px; height:40px;">
                        <div data-type="rsvp-button-recall"
                             data-appointment-id="<%= a.getId() %>"
                             style="position: absolute;width:40px; height:40px;top:0;right:0">
                            <svg class="rsvp-checkmark rsvp-chcekmark-waiting"
                                 xmlns="http://www.w3.org/2000/svg"
                                 viewBox="0 0 52 52">
                                <circle class="rsvp-checkmark__circle rsvp-checkmark__circle-waiting" cx="26" cy="26" r="25" fill="none"/>
                                <path class="rsvp-checkmark__check" fill="none" d="M14.1 27.2l7.1 7.2 16.7-16.8"/>
                            </svg>
                        </div>
                    </div>
                </section>

            </div>
        </div>
    </div>
<% }    %>