{{#extend "my-account-v2"
  customIconUserClass=my_account.installer.icons.installer
  dataBreadcrumbs=personal_details.installer.breadcrumbs
  pageClass="page_my-account_new"
  title="My Account Installer"
  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.installer.currentData
      }}
      {{> my-account/personal-details-form
          isInstaller=true
          fields=personal_details.installer.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"
}}
<script defer src="./js/my-account.min.js"></script>
<script defer src="./js/personal-details.min.js"></script>
{{/content}}
{{/extend}}