<h4><a href="#/configuration/profile"><i class="fas fa-chevron-left"></i></a>&nbsp;Unterprofile</h4>
<% var mBirthday = p.getMomentBirthday(); %>
<div class="row">
  <div class="col-sm-12">
    <div class="card">
      <form data-id="form-profile"
            class="needs-validation"
            novalidate>
        <div class="card-body">
          <div class="form-group">
            <p>
              <strong>Unterprofile</strong><br />
              <small><i class="fa fa-info-circle"></i> Du kannst beliebig viele Unterprofile errichten. Unterprofile sind beispielsweise für Personen mit Kindern oder mehreren Haustieren nützlich.<br /><u>Beispiel:</u> Du verwendest <strong>Pro</strong>Buddy mit deiner Hundeschule und hast zwei Hunde. Dann kannst du mit deinem Account für jeden Hund individuell zu- bzw. absagen.</small>
            </p>
            <label>Deine derzeitigen Unterprofile</label>
            <% let cp = p.getChildProfiles();   %>
            <% if ( 0 === cp.length ) {   %>
              <p>
                <i>- keine -</i>
              </p>
            <% } else { %>
              <div class="table-responsive">
                <table class="table table-striped">
                  <thead>
                  <tr>
                    <th class="text-center">ID</th>
                    <th>Name</th>
                    <th>Typ</th>
                    <th class="text-center">&nbsp;</th>
                  </tr>
                  </thead>
                  <tbody>
                  <% for ( let cpi = 0; cpi < cp.length; cpi++ )  {   %>
                  <tr>
                    <td class="text-center"
                        style="vertical-align: middle">
                      <%= cp[ cpi ].id %>
                    </td>
                    <td style="vertical-align: middle">
                      <%= cp[ cpi ].name %>
                    </td>
                    <td style="vertical-align: middle">
                      <i class="<%= p.getChildProfileIconByType( cp[ cpi ].type )  %>"></i> <%= p.getChildProfileNameByType( cp[ cpi ].type ) %>
                    </td>
                    <td class="text-right">
                      <button type="button"
                              data-subprofile-id="<%= cp[ cpi ].id %>"
                              data-type="editSubProfile"
                              class="btn btn-primary btn-sm">
                        <i class="fas fa-pencil-alt"></i>
                      </button>
                      <button type="button"
                              data-subprofile-id="<%= cp[ cpi ].id %>"
                              data-type="deleteSubProfile"
                              class="btn btn-danger btn-sm">
                        <i class="far fa-trash-alt"></i>
                      </button>
                    </td>
                  </tr>
                  <% }    %>
                  </tbody>
                </table>
              </div>
            <% }    %>
          </div>

        </div>
        <div class="card-footer">
          <a href="#/configuration/profile"
             class="btn btn-sm btn-secondary">
            <%= _lc( 'BTN_CANCEL' ) %>
          </a>
          <button type="button"
                  data-id="btn-add-subprofile"
                  class="btn btn-sm btn-primary">
            Neues Unterprofil anlegen
          </button>
        </div>
      </form>
    </div>
  </div>
</div>