<%=raw app.core.View.getTemplate( 'configuration-nav', { activeTab : 'account' } ) %>
<% var p = app.model.SessionUser.getUserProfile(); %>
<div class="row">
    <div class="col-sm-12">
        <div class="card">
            <div class="card-body">
                <strong>Account</strong><br />
                <div class="table-responsive">
                    <table class="table-standard">
                        <tbody>
                        <tr>
                            <td><%= _lc( 'EMAIL' ) %></td>
                            <td><%= account.email %></td>
                        </tr>
                        <tr>
                            <td><%= _lc( 'VALIDATED' ) %></td>
                            <td><i class="far fa-check-circle text-success"></i></td>
                        </tr>
                        <tr>
                            <td><%= _lc( 'REGISTERED_SINCE' ) %></td>
                            <td><%= app.util.Helper.getMomentFromUTCTime( account.created_dt ).format( 'DD.MM.YYYY' ) %></td>
                        </tr>
                        </tbody>
                    </table>
                </div>
                <hr />
                <div class="row">
                    <div class="col">
                        <strong>Adresse</strong><br />
                        <p>
                            <%= p.getStreet() ? p.getStreet() : '---' %><br />
                            <%= p.getZipCode() ? p.getZipCode() : '' %>&nbsp;<%= p.getCity() ? p.getCity() : '' %><br />
                            <%= p.getCountryName() ? p.getCountryName() : '---' %>
                        </p>
                        <p>
                            <i class="fa fa-mobile"></i> <%= p.getMobile() ? p.getMobile() : 'n/a' %><br />
                            <i class="fa fa-phone"></i> <%= p.getPhone()  ? p.getPhone() : 'n/a' %>
                        </p>
                        <% if ( false === p.hasValidAddressData() )   {   %>
                            <div class="alert alert-info">
                                <i class="fa fa-info-circle"></i>&nbsp;Bitte vervollständigen Sie Ihre Adressdaten. <a class="btn btn-sm btn-info" href="#/configuration/account/edit-address">Adressdaten hinterlegen</a>
                            </div>
                        <% }    %>
                    </div>
                </div>
                <hr />
                <div class="row">
                    <div class="col">
                        <strong><%= _lc( 'CALENDAR_EXPORT' ) %></strong><br />
                        <p>
                            <%= _lc( 'CALENDAR_EXPORT_INFO_1' ) %>
                        </p>
                        <p>
                            <%= _lc( 'CALENDAR_EXPORT_INFO_2' ) %>
                        </p>
                        <p>
                            <%= _lc( 'CALENDAR_EXPORT_LINK' ) %>
                        </p>
                        <input type="text"
                               data-id="input-ical"
                               class="form-control"
                               value="<%= app.core.App.getConfig( 'url' ) %>/ical/<%= app.model.SessionUser.getUserProfile().getPublicId() %>/probuddy.ics"
                        />
                    </div>
                </div>
            </div>
            <div class="card-footer">
                <div class="row">
                    <div class="col">
                        <a href="#/configuration/account/edit-address" class="btn btn-sm btn-primary">
                            Adresse bearbeiten
                        </a>
                        <a href="#/configuration/account/edit-password" class="btn btn-sm btn-primary">
                            <%= _lc( 'BTN_EDIT_PASSWORD' ) %>
                        </a>
                        <button type="button"
                                data-id="btn-copy-ical-link"
                                class="btn btn-sm btn-primary">
                            <%= _lc( 'BTN_COPY_CALENDAR_LINK' ) %>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>