<template>

<!--spinner-->
<div if:true={isLoaded}>
<lightning-spinner alternative-text="Loading..." variant="brand" class="slds-
is-fixed"></lightning-spinner>
</div>
<div class="slds-theme_shade slds-var-p-around_small slds-container_small slds-
container_medium slds-container_large slds-container_center">
<lightning-icon size="xx-small" icon-name="utility:chevronleft" alternative-
text="Go Back" title="Go Back" class="chevron
slds-var-p-right_xx-smallmall"></lightning-icon>
<a onclick={navigateToMainMenu} class="cm-home-link">Return to Main Page</a>
<lightning-layout multiple-rows>
<lightning-layout-item padding="around-small" size="12" small-device-
size="12" medium-device-size="7">
<div class="slds-text-heading_large TitleColor">
Transfer to a New Primary Chapter
</div>
<div class="bottomBorder slds-var-m-top_large
slds-size_12-of-12"></div>
<div class="slds-var-p-vertical_small slds-text-heading_medium
GentonaLightFont">
You are currently a member of {primaryChapter} chapter in the
{currentRegion} region. Please use the boxes below to
select which chapter you want to transfer to:
</div>
</lightning-layout-item>
<lightning-layout-item padding="around-small" size="12" small-device-
size="12" medium-device-size="5">
<div class="primarytransferImage">
<img width="100%" height="100%" src={primaryTransferImg}/>
</div>
</lightning-layout-item>
</lightning-layout>
<div class="slds-box">
<lightning-layout multiple-rows>
<lightning-layout-item size="11" small-device-size="11" medium-device-
size="6" large-device-size="6" >
<lightning-combobox class="slds-var-p-around_x-small selectRegion
progressbar" name="selectRegion" label="Select Your Desired Region"
required="true" value={selectedRegion} options={regionOptions}
dropdown-alignment="auto"
onchange={handleRegionChange} message-when-value-missing="Region
must be selected." field-level-help={desiredRegionHelpText}></lightning-combobox>
<template if:true={isChecked}>
<lightning-combobox class="slds-var-p-around_x-small
SelectChapter progressbar" name="SelectChapter" label="Select Your Desired Primary
Chapter"
required={isFieldRequired} value={selectedChapter}
options={chapterOptions} dropdown-alignment="auto" onchange={handleChapterChange}
disabled={isChecked}
message-when-value-missing="Chapter must be selected.">
</lightning-combobox>
</template>
<template if:false={isChecked}>
<lightning-combobox class="slds-var-p-around_x-small
SelectChapter progressbar" name="SelectChapter" label="Select Your Desired Primary
Chapter"
 required={isFieldRequired} value={selectedChapter}
options={chapterOptions} dropdown-alignment="auto" onchange={handleChapterChange}
disabled={isChecked}
message-when-value-missing="Chapter must be selected.">
</lightning-combobox>
</template>
<lightning-input class="slds-var-p-around_x-small reqStartDate"
type="date" label="Requested Start Date"
name="requestedStartDate" required="true" data-id="startDate" field-
level-help="The Requested Start Date must be on or before 1 July of the next fiscal
year."
message-when-value-missing="Start Date must be entered."
onchange={handleRequestStartDate}>
</lightning-input>
<!--lightning-input class="slds-var-p-around_x-small reqStartDate"
type="date" label="Requested Start Date"
name="requestedStartDate" required="true" min={startDateRange}
max={endDateRange} data-id="startDate"
field-level-help="The Requested Start Date must be on or before 1
July of the next fiscal year."
message-when-value-missing="Start Date must be entered."
onchange={handleRequestStartDate}>
</lightning-input-->
<lightning-textarea
data-id="reasonForLeaving" class="slds-p-around_x-small
progressbar slds-wrap"
max-length="100" message-when-too-long="Allowed limit is 100
characters"
label="Why are you changing chapters?"
onchange={handleInputChange}>
</lightning-textarea>
</lightning-layout-item>
<lightning-layout-item class="slds-var-m-top_large" size="1" small-
device-size="1" medium-device-size="1"
large-device-size="1">
<lightning-icon class="slds-var-p-top_medium" icon-
name="utility:search" alternative-text="Search"
size="small" title="Search Region"
onclick={displayRegionPopUp}></lightning-icon>
<!-- Region Search -->
<template if:true={showRegionPopUp}>
<c-transfer_-region-search selctdregion =
{selectedRegionName} selected-country = {selectedCountry} selected-state =
{selectedState} onaddregion = {callRegionName}></c-transfer_-region-search>
</template>
</lightning-layout-item>
<lightning-layout-item class="slds-var-m-top_large checkCls" size="12"
small-device-size="12"
medium-device-size="5" large-device-size="5">
<lightning-input class="slds-var-p-around_x-small progressbar slds-
wrap" type="checkbox"
label="I want to leave my current chapter but am not sure which
chapters I am eligible to join."
name="cantDecide" onchange={handleCheckboxChange} data-
id="checkbox"
disabled={hasSelectedChapter} value={isChecked}>
</lightning-input>
<template if:true={isChecked}>
 <lightning-formatted-rich-text class="slds-var-p-around_x-small
slds-wrap textfontcls"
value={checkboxText}></lightning-formatted-rich-text>
</template>
</lightning-layout-item>
</lightning-layout>
</div>
<!--Buttons Section-->
<div class="slds-grid slds-wrap slds-size_1-of-1 slds-var-p-top_small">
<div class="slds-size_1-of-1 slds-text-align_center">
<button class="slds-button slds-button_neutral buttonClr"
value="submit" disabled={disableSubmitButton}
onclick={handleSubmit}>SUBMIT</button>
</div>
</div>
</div>
</template>