<div id="account-overview" v-cloak>
  <account-notification-banner></account-notification-banner>

  <div class="container-fluid px-5">
  
    <div class="d-flex justify-content-between">
      <h3>
        <%= __("My Account") %>
      </h3>
    </div>

    <hr>
  
    <div class="row mb-3">
      <div class="col-4">
        <h4><%=__('Personal information')%></h4>
      </div>
      <div class="col-4">
          <span class="float-sm-right">
            <a style="width: 150px" class="btn btn-sm btn-outline-info" href="/account/profile"><%=__('Update Profile')%></a>
          </span>
      </div>
    </div>

    <div class="row">
      <div class="col-2 fw-bold"><%=__('Name')%>:</div>
      <div class="col">{{me.fullName}}</div>
    </div>

    <div class="row">
      <div class="col-2 fw-bold"><%=__('E-mail')%>:</div>
      <div class="col">
        <span :class="[me.emailStatus === 'unconfirmed' || me.emailStatus === 'change-requested' ? 'text-muted' : '']">{{me.emailChangeCandidate ? me.emailChangeCandidate : me.emailAddress}}</span>
        <span v-if="me.emailStatus === 'unconfirmed' || me.emailStatus === 'change-requested'" class="badge badge-pill badge-warning"><%=__('Unverified')%></span>
      </div>
    </div>

    <div class="row">
      <div class="col-2 fw-bold"><%=__('Role')%>:</div>
      <div class="col">{{me.profile?me.profile.toUpperCase():"<%=__('Visitor')%>"}}</div>
    </div>

    <hr/>

    <div class="row mb-3">
      <div class="col-4">
        <h4><%=__('Security')%></h4>
      </div>
      <div class="col-4">
          <span class="float-sm-right">
            <a style="width: 150px" class="btn btn-sm btn-outline-info" href="/account/password"><%=__('Update password')%></a>
          </span>
      </div>
    </div>
    <div class="row">
      <div class="col-2 fw-bold"><%=__('Password')%>:</div>
      <div class="col">***</div>
    </div>
    
    <hr/>

    <div class="row mb-3">
      <div class="col-4">
        <h4><%=__('Church')%></h4>
      </div>
    </div>
    <div class="row">
      <div class="col-2 fw-bold">
        church id:
      </div>
      <div class="col">{{me.church}}</div>
    </div>
    
    <hr/>

    <div class="row mb-3" v-if="isBillingEnabled">
      <div class="col-sm-6">
        <h4><%=__('Billing')%></h4>
      </div>
      <div class="col-sm-6">
          <span class="float-sm-right">
            <button style="width: 150px;" class="btn btn-sm btn-outline-info" @click="clickUpdateBillingCardButton()">{{ me.hasBillingCard ? 'Change card' : '+ Add card' }}</button>
          </span>
      </div>
    </div>
    <div v-if="isBillingEnabled && me.hasBillingCard">
      <div class="row">
        <div class="col-3"><%=__('Credit card')%>:</div>
        <div class="col">{{me.billingCardBrand}} <%=__('Ending in')%> <strong>{{me.billingCardLast4}}</strong> <a style="text-decoration: underline; cursor: pointer;" class="ml-2" purpose="remove-button" @click="clickRemoveCardButton()"><%=__('Remove')%></a></div>
      </div>
      <div class="row">
        <div class="col-3"><%=__('Expiration')%>:</div>
        <div class="col">{{me.billingCardExpMonth}}/{{me.billingCardExpYear}}</div>
      </div>
    </div>
    <div class="alert alert-danger" v-else-if="isBillingEnabled && cloudError">
      <%=__('There was an error updating your credit card information')%>, <%=__('Global.or')%> <a href="/contact"><%=__('Contact support')%></a> <%=__('If the error persists')%>.
    </div>
    <div class="alert alert-secondary" v-else-if="isBillingEnabled">
      <%=__('You have not linked a payment source to your account')%>
    </div>
  </div>

  <% /* Modify Card Info Modal */ %>
  <modal v-if="modal === 'update-billing-card'" @close="closeModal()" v-cloak>
    <div class="modal-header">
      <h2 class="modal-title">{{me.hasBillingCard? 'Edit' : 'Add' }} <%=__('Credit card')%></h2>
    </div>
    <ajax-form :handle-submitting="handleSubmittingUpdateBillingCard" :syncing.sync="syncing" :cloud-error.sync="cloudError" :form-data="formData" :form-rules="formRules" :form-errors.sync="formErrors" @submitted="submittedUpdateBillingCard()">
      <div class="modal-body">
        <div class="form-group">
          <label><%=__('Credit card')%></label>
          <stripe-card-element :stripe-publishable-key="stripePublishableKey" :is-errored.sync="formErrors.newPaymentSource" v-model="formData.newPaymentSource" key="billing-card" ref="billingcardref"></stripe-card-element>
        </div>
        <p class="text-danger" v-if="cloudError"><small>
            <%=__('An error occured while processing your request')%>, <%=__('Global.or')%>
            <a href="/contact"><%=__('Contact support')%></a> <%=__('If the error persists')%>.</small></p>
      </div>
      <div class="modal-footer flex-row-reverse justify-content-start">
        <ajax-button :syncing="syncing" class="btn btn-info"><%=__('Save card')%></ajax-button>
        <button type="button" class="btn btn-outline-danger mr-2" data-dismiss="modal"><%=__('Cancel')%></button>
      </div>
    </ajax-form>
  </modal>

  <% /* Confirm Remove Card Info Modal */ %>
  <modal v-if="modal === 'remove-billing-card'" @close="closeModal()" v-cloak>
    <div class="modal-header">
      <h5 class="modal-title"><%=__('Remove Card Info')%>?</h5>
    </div>
    <ajax-form action="updateBillingCard" :syncing.sync="syncingRemoveCard" :cloud-error.sync="cloudError" :form-data="formData" :form-rules="formRules" :form-errors.sync="formErrors" @submitted="submittedRemoveCardForm()">
      <div class="modal-body text-center">
        <p><%=__('Are you sure you want to remove your')%> {{me.billingCardBrand}} <%=__('Ending in')%> <strong>{{me.billingCardLast4}}</strong>?</p>
        <p class="text-muted mb-0"><%=__('This may restrict your access to paid features')%>.</p>
        <cloud-error v-if="cloudError"></cloud-error>
      </div>
      <div class="modal-footer border-0 justify-content-center">
        <button data-dismiss="modal" class="btn btn-outline-secondary mr-2"><%=__('Never mind')%></button>
        <ajax-button type="submit" :syncing="syncingRemoveCard" class="btn btn-danger ml-2"><%=__('Remove')%></ajax-button>
      </div>
    </ajax-form>
  </modal>
</div>
<%- /* Expose locals as `window.SAILS_LOCALS` :: */ exposeLocalsToBrowser() %>
