{{#extend "my-account-v2"
  dataBreadcrumbs=personal_details.diy.breadcrumbs
  pageClass="page_my-account_new"
  title="My Account DIY"
  pageMyAcc=true
  myAccV2=true
  isLoggedIn=true
  mainClass="personal-details"
}}
{{#content "head" mode="append"}}
<link type="text/css" rel="stylesheet" href="./css/pages/page_personal-details.css">
{{/content}}
{{#content "notification"}}
<div class="globalMessages">
</div>
{{/content}}
{{#content "main"}}
<div class="container">
  <div class="row">
    <div class="col-12">
      {{> my-account/mobile-nav
          mod
          menu=my_account.diy.menu
          active-index=2
          page-name="Personal Details"
          }}
      <div class="personal-details__header">
        <h1 class="personal-details__title">Personal Details</h1>
        <a href="./page_my-account_change-password.html" class="btn btn_full btn-outline-primary btn__change-password">
          <i class="fas fa-key icon"></i>
          Change Password
        </a>
      </div>
    </div>
    <div class="col-12">
      {{> my-account/personal-details
          details=personal_details.diy.currentData
      }}
      {{> my-account/personal-details-form
          fields=personal_details.diy.fields
          buttons=personal_details.buttons
      }}
    </div>
  </div>
</div>

{{/content}}
{{#content "foot" mode="append"}}
{{> my-account/leave-modal
    personal_details.reset-popup
    mod="details-modal"
    id="leave-popup"
}}
{{> my-account/leave-modal
    personal_details.leave-popup
    mod="details-modal"
    id="change-password-popup"
}}
{{> my-account/leave-modal
    personal_details.confirmation-popup
    mod="details-modal"
    id="confirmation-email-popup"
}}
<script defer src="./js/my-account.min.js"></script>
<script defer src="./js/personal-details.min.js"></script>
{{/content}}
{{/extend}}