<% if ( p ) {   %>

<div class="row">
    <div class="col text-center">
        <img class="img-fluid rounded-circle profile-image-big img-thumbnail"
             style="margin-bottom: 12px; padding: 6px"
             src="<%= p.getProfileImg() %>" />
    </div>
</div>
<div class="row">
    <div class="col text-center">
        <div style="font-size: 1.4rem">
            <%=raw p.getName() %>
        </div>
        <% if ( p.isInGroupCategory( 'DOGSCHOOL' ) ) { %>
        <div class="profile-header">
            <%= _lc( 'PROFILE_DOGNAME' ) %>
        </div>
        <div class="profile-content">
            <%= p.getCustomGroupProperty( 'DOGSCHOOL', 'dogname' ) ? p.getCustomGroupProperty( 'DOGSCHOOL', 'dogname' ) : '---' %>
        </div>
        <% }    %>
        <div class="profile-header">
            <%= _lc( 'PROFILE_STATUS' ) %>
        </div>
        <div class="profile-content">
            <%= p.getStatus() %>
        </div>
        <div class="profile-header">
            <%= _lc( 'ADDRESS' ) %>
        </div>
        <div class="profile-content">
            <%= p.getStreet() ? p.getStreet() : '---' %><br />

            <%= p.getZipCode() ? p.getZipCode() : '' %>&nbsp;<%= p.getCity() ? p.getCity() : '' %>
        </div>
        <div class="profile-header">
            <%= _lc( 'PHONE' ) %>
        </div>
        <div class="profile-content">
            <% if ( p.getMobile() ) {   %>
                <a href="tel:<%= p.getMobile() %>"><%= p.getMobile() %></a>
            <% }  else {  %>
                ---
            <% }    %>
            <br />
            <% if ( p.getPhone() ) {   %>
                <a href="tel:<%= p.getPhone() %>"><%= p.getPhone() %></a>
            <% }  else {  %>
                ---
            <% }    %>
        </div>
        <div class="profile-header">
            <%= _lc( 'EMAIL' ) %>
        </div>
        <div class="profile-content">
            <% if ( p.getEmail() ) {   %>
                <a href="mailto:<%= p.getEmail() %>"><%= p.getEmail() %></a>
            <% } else { %>
                ---
            <% }    %>
        </div>
        <div class="profile-header">
            <%= _lc( 'BIRTHDAY' ) %>
        </div>
        <div class="profile-content">
            <%= ( null != p.getMomentBirthday() ) ? p.getMomentBirthday().format( 'DD.MM.YYYY' ) : '---' %>
        </div>
        <div class="profile-header">
            <%= _lc( 'JOIN_DT' ) %>
        </div>
        <div class="profile-content">
            <% var momentJoin = p.getMomentJoinInGroup( g.getId() ); %>
            <%= ( null != momentJoin ) ? momentJoin.format( 'DD.MM.YYYY' ) : '---' %>
        </div>
    </div>
</div>
<hr />
<div class="row">
    <div class="col">
        <strong><%= _lc( 'CHANGE_ROLE' ) %></strong>
    </div>
</div>
<div class="row">
    <div class="col-6">
        <select class="form-control form-control-sm"
        <%= ( 'trainer' === p.getRoleInGroup( g.getId() )  ) ? 'disabled="disabled"' : '' %>
        data-id="select-member-role">
        <option value="player" <%= ( 'player' === p.getRoleInGroup( g.getId() )  ) ? 'selected="selected"' : '' %> >
        <%= _lc( 'GROUP_MEMBER' ) %>
        </option>
        <option value="cotrainer" <%= ( 'cotrainer' === p.getRoleInGroup( g.getId() )  ) ? 'selected="selected"' : '' %> >
        <%= _lc( 'GROUP_ADMIN' ) %>
        </option>
        <% if ( 'trainer' === p.getRoleInGroup( g.getId() ) ) { %>
        <option value="trainer" <%= ( 'trainer' === p.getRoleInGroup( g.getId() )  ) ? 'selected="selected"' : '' %> >
        <%= _lc( 'GROUP_OWNER' ) %>
        </option>
        <% }    %>
        </select>
    </div>
    <div class="col">
        <button class="btn btn-primary btn-sm"
                data-id="btn-update-role">
            <%= _lc( 'BTN_SAVE_NEW_ROLE' ) %>
        </button>
    </div>
    <% if ( 'trainer' === p.getRoleInGroup( g.getId() ) ) { %>
    <div class="col-sm-12">
        <small><i><%= _lc( 'CANNOT_CHANGE_GROUP_OWNER_ROLE_INFO' ) %></i></small>
    </div>
    <% }    %>
</div>
<hr />
<div class="row">
    <div class="col">
        <strong><%= _lc( 'ASSIGNED_MEMBER_GROUP_CATEGORIES' ) %></strong>
    </div>
</div>
<div class="row">
    <div class="col">
        <% var cgs = g.getCourseCategoriesForProfile( p ); %>
        <% for ( var cgsi = 0; cgsi < cgs.length; cgsi++ ) {    %>
            <% if ( cgsi > 0 ) {    %>
                <%= '   ' %>
            <% }    %>
            <span class="badge badge-pill badge-primary"><%= cgs[ cgsi ].name %></span>
        <% }    %>
    </div>
    <div class="col-sm-12">
        <small><i><%= _lc( 'ASSIGNED_MEMBER_CATEOGORY_INFO' ) %></i></small>
    </div>
    <div class="col">
        <a href="#/course/categories/<%= g.getId() %>"
           class="btn btn-primary btn-sm">
            <%= _lc( 'BTN_NAVIGATE_TO_CATEGORY_MANAGEMENT' ) %>
        </a>
    </div>
</div>
<hr />
<div class="row">
    <div class="col">
        <strong><%= _lc( 'MEMBER_CONTRACT' ) %></strong>
    </div>
</div>
<div class="row">
    <div class="col-6">
        <div class="form-group" style="margin-bottom:0;">
            <label for="appointment-log-until">
                <%= _lc( 'CONTRACT_NAME' ) %>
            </label>
            <input type="text"
                   class="form-control"
                   maxlength="128"
                   value="<%= p.getContractInGroup( g.getId() ) ? p.getContractInGroup( g.getId() ) : '' %>"
                   data-id="input-contract" />
        </div>
    </div>
    <div class="col-6">
        <div class="form-group" style="margin-bottom:0;">
            <label for="contract-date">
                <%= _lc( 'CONTRACT_DATE' ) %>
            </label>
            <input type="date"
                   id="contract-date"
                   value="<%= p.getContractMomentInGroup( g.getId() ) ? p.getContractMomentInGroup( g.getId() ).format( 'YYYY-MM-DD' ) : '' %>"
                   data-id="input-contract-moment"
                   class="form-control" />
        </div>
    </div>
    <div class="col">
        <button class="btn btn-primary btn-sm"
                data-id="btn-update-contract">
            <%= _lc( 'BTN_SAVE_MEMBER_CONTRACT' ) %>
        </button>
    </div>
</div>
<hr />
<div class="row">
    <div class="col">
        <strong><%= _lc( 'APPOINTMENT_LOG' ) %></strong>
    </div>
</div>
<div class="row">
    <div class="col-lg-6 col-md-12">
        <div class="form-group" style="margin-bottom:0;">
            <label for="appointment-log-from">
                <%= _lc( 'FROM' ) %>
            </label>
            <input type="date"
                   id="appointment-log-from"
                   value="<%= p.getContractMomentInGroup( g.getId() ) ? p.getContractMomentInGroup( g.getId() ).format( 'YYYY-MM-DD' ) : moment().subtract( 30, 'days' ).format( 'YYYY-MM-DD' ) %>"
                   data-id="input-appointment-log-from"
                   class="form-control" />
        </div>
    </div>
    <div class="col-lg-6 col-md-12">
        <div class="form-group" style="margin-bottom:0;">
            <label for="appointment-log-until">
                <%= _lc( 'UNTIL' ) %>
            </label>
            <input type="date"
                   id="appointment-log-until"
                   value="<%= moment().format( 'YYYY-MM-DD' ) %>"
                   data-id="input-appointment-log-until"
                   class="form-control" />
        </div>
    </div>
    <div class="col">
        <button class="btn btn-primary btn-sm"
                data-id="btn-update-appointment-log">
            <%= _lc( 'BTN_UPDATE_APPOINTMENT_LOG' ) %>
        </button>
    </div>
</div>
<div class="row">
    <div class="col"
         data-id="container-appointment-log">
        <i class="fas fa-spinner fa-spin"></i>
    </div>
</div>
<hr />
<div class="row">
    <div class="col">
        <strong><%= _lc( 'ADMIN_NOTES' ) %></strong><small> - <%= _lc( 'ADMIN_NOTES_INFO' ) %></small>
    </div>
</div>
<div class="row">
    <div class="col"
         data-id="admin-note">
        <i class="fas fa-spinner fa-spin"></i>
    </div>
</div>
<div class="row">
    <div class="col">
        <button class="btn btn-primary btn-sm"
                data-id="btn-save-admin-note">
            <%= _lc( 'BTN_SAVE_ADMIN_NOTE' ) %>
        </button>
    </div>
</div>

<% } else { %>

<div class="row">
    <div class="col">
        <%= _lc( 'SELECT_MEMBER_TO_EDIT' ) %>
    </div>
</div>

<% }    %>