<div class="uk-width-1-3@m uk-margin-auto {!signedIn ? '': 'hide'}">
                <div class="uk-card uk-card-default">
                    <div class="uk-card-header">
                        <div class="uk-grid-small uk-flex-middle" uk-grid>
                            <div class="uk-width-expand">
                                 <h3 class="uk-card-title uk-margin-remove-bottom">Please Sign In Or Create Your Account</h3>
                            </div>
                        </div>
                    </div>
                    <div class="uk-card-body">
                        <button class="uk-button uk-button-primary" onclick="{signIn}">Sign In</button>
                        <button class="uk-button uk-button-primary" onclick="{signUp}" style="float:right;">Sign Up</button>
                    </div>
                </div>
            </div>
            <div class="{signedIn ? '': 'hide'}">
                <div class="{uploading ? '':'hide'}">
                    <div class="uk-width-2-3@m uk-margin-auto">
                        <div class="uk-card uk-card-default uk-card-body">
                            <h3 if="{!finishedProcessing}">Upload In Progress!</h3>
                            <h3 if="{finishedProcessing}">Listings created successfully. </h3>
                            <a class="uk-margin-bottom uk-button uk-buttom-small uk-button-primary" target="_blank" href="{uploadingItems[0].a.main_dashboard_link}" if="{finishedProcessing}">Go To Dashboard</a>
                            <div if="{!finishedProcessing}" class="uk-text-danger uk-margin-bottom">Please do not close the window</div>
                            <div each="{u,index in uploadingItems}" class="uk-flex uk-flex-top uk-margin-bottom">
                                <div class="{u.status === 3 ? 'uk-text-success' : (u.status === 2 ? 'uk-text-emphasis' : 'uk-text-muted')} uk-width-expand">{index+1}.
                                    <span if="{u.status === 1 && u.photos}">{u.name}</span><span if="{u.status === 3 && u.photos}">Updated {u.name}</span><span if="{u.status === 2 && u.photos}">Updating {u.name}</span>
                                    <span if="{u.status === 1 && !u.photos}">{u.name}</span><span if="{u.status === 3 && !u.photos}">Created {u.name}</span><span if="{u.status === 2 && !u.photos}">Creating {u.name}</span>
                                    <div if="{u.photos}">
                                        Total {u.a.uploaded_photos.length} images uploaded.
                                        <span if="{u.skippingCorruptImages}" style="color:red;">
                                            Some images were corrupt. Uploaded the rest.
                                        </span>
                                    </div>
                                    <div if="{u.status === 3 && !u.photos}" style="margin: 5px 0px 10px 0;" class="uk-flex uk-grid-small" uk-grid>
                                        <div>
                                            <a target="_blank" href="{u.a.dashboard_link}" >Edit My Property</a>
                                        </div>
                                        <div class="uk-visible@m" style="margin: 0px 10px;"> | </div>
                                        <div>
                                            <a href="{u.a.rate_link}" target="_blank">Update Availability & Seasonal Rates</a>
                                        </div>
                                        <div class="uk-visible@m" style="margin: 0px 10px;"> | </div>
                                        <div>
                                            <a href="{u.a.offer_link}" target="_blank">Update Promotional Offers</a>
                                        </div>
                                    </div>
                                    <div if="{u.status === 3 && u.photos}" style="margin: 5px 0px 10px 0;">
                                        <a target="_blank" href="{u.a.photo_link}">Reorder photos & Set Cover Photo</a>
                                    </div>

</div>
                                <div style="text-align: right" class="uk-width-auto">
                                    <img if="{u.status === 2 && !u.error}" src="https://d2v8elt324ukrb.cloudfront.net/static/new_template/images/newloader.debee47f900f.gif" />
                                    <span if="{u.status === 3}" uk-icon="icon: check"></span>
                                    <span style="color:red" if="{u.error}">Error While Uploading</span>
                                    <a href="#" if="{u.error}" onclick="{uploadItems}">Retry</a>

</div>

</div>
                        </div>
                    </div>
                </div>
                <div class="uk-card uk-card-default {!uploading ? '':'hide'}">
                    <div class="uk-card-header">
                        <div class="uk-grid-small uk-flex-middle" uk-grid>
                            <div class="uk-width-expand">
                                <h3 if="{step === 1}" class="uk-card-title uk-margin-remove-bottom">Where is your property located? Mark the exact location on the map?</h3>
                                <h3 if="{step === 2}" class="uk-card-title uk-margin-remove-bottom">What type of property do you have?</h3>
                                <h3 if="{step === 3}" class="uk-card-title uk-margin-remove-bottom">Does it have a brand name?</h3>
                                <h3 if="{step === 4}" class="uk-card-title uk-margin-remove-bottom">What are the different types of accommodation do you have?</h3>
                                <h3 if="{step === 5}" class="uk-card-title uk-margin-remove-bottom">Tell us more about the accommodation type</h3>
                                <h3 if="{step === 6}" class="uk-card-title uk-margin-remove-bottom">Please specify common/external amenities you have?</h3>
                                <h3 if="{step === 7}" class="uk-card-title uk-margin-remove-bottom">Please upload good quality photos</h3>
                                <h3 if="{step === 8}" class="uk-card-title uk-margin-remove-bottom">Specify default rates & the cancellation policy</h3>
                                <h3 if="{step === 9}" class="uk-card-title uk-margin-remove-bottom">Preview Your Property</h3>
                            </div>
                        </div>
                    </div>
                    <div class="uk-card-body">
                        <div class="{step === 1 ? '': 'hide'}">
                            <div class="uk-margin-bottom uk-text-bold">Search for a landmark near you and put the marker on your exact location</div>
                            <div class="uk-flex" uk-grid>
                                <div class="uk-width-2-3@m">

</div>
                                    <div if="{location_error}" class="uk-alert-danger" uk-alert>
                                        <p>Please put a marker on the map for the exact location</p>
                                    </div>
                                </div>
                                <div class="uk-width-1-3@m">
                                    <div if="{!fetchingLocation && countries.length > 0}">
                                        <div class="uk-text-bold">
                                            Country
                                        </div>
                                        <div class="uk-margin-bottom">
                                            <select class="uk-select" onchange="{handleCountryChange}">
                                                <option each="{c in countries}" selected="{c.selected}">{c.name ? c.name : 'Select Country'}</option>
                                            </select>
                                        </div>
                                        <div if="{country_error}" class="uk-alert-danger" uk-alert>
                                            <p>Please select the country</p>
                                        </div>
                                        <div if="{states.length > 0}">
                                            <div class="uk-text-bold">
                                                State
                                            </div>
                                            <div class="uk-margin-bottom">
                                                <select class="uk-select" onchange="{handleStateChange}">
                                                    <option each="{s in states}" selected="{s.selected}">{s.name ? s.name : 'Select State/Region'}</option>
                                                </select>
                                            </div>
                                            <div if="{state_error}" class="uk-alert-danger" uk-alert>
                                                <p>Please select the state/region</p>
                                            </div>
                                        </div>
                                        <div if="{cities.length > 0}">
                                            <div class="uk-text-bold">
                                                City
                                            </div>
                                            <div class="uk-margin-bottom">
                                                <select class="uk-select" onchange="{handleCityChange}">
                                                    <option each="{c in cities}" selected="{c.selected}">{c.name ? c.name : 'Select City/Locality'}</option>
                                                </select>
                                            </div>
                                            <div if="{city_error}" class="uk-alert-danger" uk-alert>
                                                <p>Please select the city/locality</p>
                                            </div>
                                        </div>
                                        <div class="uk-alert-warning" uk-alert>
                                            <p>Please verify your country & state/region & city/locality</p>
                                        </div>
                                    </div>
                                    <div if="{fetchingLocation}">
                                        <img src="https://d2v8elt324ukrb.cloudfront.net/static/new_template/images/newloader.debee47f900f.gif" />
                                    </div>

</div>
                            </div>

</div>
                        <div class="{step === 2 ? '': 'hide'}">
                            <div class="uk-flex uk-flex-middle uk-flex-wrap">
                                <div class="uk-width-2-5@m uk-margin-bottom">
                                    <div class="uk-padding" style="border: 1px solid #dedede;">
                                        <div class="uk-text-bold">Select one of these if you have rooms that you rent out individually</div>
                                        <div class="uk-margin-top uk-flex uk-flex-wrap">
                                            <div each="{t in multi_types}" class="uk-width-1-2@m uk-margin-bottom">
                                                <label ><input class="uk-radio" type="radio" name="type" value="{t.name}" checked="{t.name === type}" onclick="{handleTypeChange(t)}"> {t.name}</label>
                                            </div>

</div>
                                    </div>
                                </div>
                                <div class="uk-width-1-5@m uk-margin-bottom">
                                    <h2 style="font-weight: bold; text-align: center;">OR</h2>
                                </div>
                                <div class="uk-width-2-5@m uk-margin-bottom">
                                    <div class="uk-padding" style="border: 1px solid #dedede;">
                                        <div class="uk-text-bold">Select one of these if you rent out entire properties of the types below</div>
                                        <div class="uk-margin-top uk-flex uk-flex-wrap">
                                            <div each="{t in standalone_types}" class="uk-width-1-2@m uk-margin-bottom">
                                                <label><input class="uk-radio" type="radio" name="type" value="{t.name}" checked="{t.name === type}" onclick="{handleTypeChange(t)}"> {t.name}</label>
                                            </div>
                                        </div>
                                    </div>

</div>
                            </div>

<div if="{type_error}" class="uk-alert-danger" uk-alert>
                                <p>Please select one option</p>
                            </div>
                        </div>
                        <div class="{step === 3 ? '': 'hide'}">
                            <div class="uk-text-bold">Your brand name. This is optional. You can click next if you dont have one.</div>
                            <div class="uk-margin-top">
                                <input class="uk-input" type="text" placeholder="eg. Anantara Homestay" oninput="{handleBrandNameChange}">
                            </div>
                        </div>
                        <div class="{step === 4 ? '': 'hide'}">
                            <p class="uk-text-meta">For example Standard Room, Deluxe Villa, 2 Bedroom Apartment, 3BHK Bungalow With Private Pool etc</p>
                            <div each="{t,index in accommodation_types}" class="uk-margin-bottom">
                                <div class="uk-text-bold">Type {index+1}</div>
                                 <input class="uk-input" type="text" value="{t.name}" placeholder="" oninput="{handleAccommodationTypeNameChange(t)}">
                            </div>
                            <a href="#" onclick="{handleAddAccommodationType}">Add More Accommodation Types</a>
                            <div if="{accommodation_types_error}" class="uk-alert-danger" uk-alert>
                                <p>Please specify at least one accommodation type</p>
                            </div>

</div>
                        <div class="{step === 5 ? '': 'hide'}">
                            <div each="{t,index in accommodation_types}" class="uk-margin-bottom" style="border: 1px solid #dedede;padding: 15px; margin-bottom: 30px;">
                                <div class="uk-text-bold">{t.name}</div>
                                <hr />
                                <div class="uk-flex uk-flex-wrap" uk-grid>
                                    <div if="{multi}" class="uk-width-1-3@m">
                                        <div>Type Of Accommodation</div>
                                        <select class="uk-select" onchange="{handleAccommodationTypeChange(t)}">
                                            <option each="{a in accommodation_options}" selected="{t.type === a.name}">{a.name}</option>
                                        </select>
                                    </div>
                                    <div class="uk-width-1-3@m">
                                        <div>How many {t.name ? t.name : 'units'} do you have?</div>
                                        <select class="uk-select" onchange="{handleUnitChange(t)}">
                                            <option each="{a in unit_options}" selected="{t.units === a.name}">{a.name}</option>
                                        </select>
                                    </div>
                                     <div class="uk-width-1-3@m">
                                         <div>Max Guests In Each {t.name ? t.name : 'unit'}</div>
                                        <select class="uk-select" onchange="{handleGuestPerUnitChange(t)}">
                                            <option each="{a in occupancy_options}" selected="{t.max_guests === a.name}">{a.name}</option>
                                        </select>
                                    </div>
                                    <div if="{t.multi_bed}" class="uk-width-1-3@m">
                                         <div>Bedrooms In Each {t.name ? t.name : 'unit'}</div>
                                        <select class="uk-select" onchange="{handleBedroomsPerUnitChange(t)}">
                                            <option each="{a in bedroom_options}" selected="{t.bedrooms === a.name}">{a.name}</option>
                                        </select>
                                    </div>
                                    <div if="{t.multi_bed}" class="uk-width-1-3@m">
                                         <div>Bathrooms In Each {t.name ? t.name : 'unit'}</div>
                                        <select class="uk-select" onchange="{handleBathroomsPerUnitChange(t)}">
                                            <option each="{a in bathroom_options}" selected="{t.bathrooms === a.name}">{a.name}</option>
                                        </select>
                                    </div>
                                </div>
                                <div style="margin: 20px 0 10px 0;">Select whats applicable for {t.name}</div>
                                <div class="uk-flex uk-flex-wrap">
                                    <div each="{ia in internal_amenities_options}" class="uk-width-1-2 uk-width-1-5@m uk-margin-bottom">
                                        <label><input class="uk-checkbox" type="checkbox" name="type" value="{ia.name}" checked="{t.amenities && t.amenities.includes(ia.name)}" onclick="{handleTypeAmenitiesChange(t)}"> {ia.name}</label>
                                    </div>

</div>
                                <div if="{t.amenities_error}" class="uk-alert-danger" uk-alert>
                                    <p>Please specify atleast one amenity</p>
                                </div>
                            </div>
                        </div>

<div class="{step === 6 ? '': 'hide'}">
                            <div class="uk-flex uk-flex-wrap">
                                <div each="{ia in external_amenities_options}" class="uk-width-1-2 uk-width-1-5@m uk-margin-bottom">
                                    <label><input class="uk-checkbox" type="checkbox" name="type" value="{ia.name}" checked="{amenities && amenities.includes(ia.name)}" onclick="{handleAmenitiesChange}"> {ia.name}</label>
                                </div>
                            </div>
                            <div if="{amenities_error}" class="uk-alert-danger" uk-alert>
                                <p>Please specify at least two amenities</p>
                            </div>
                            <div class="uk-margin-top">
                                <div class="uk-text-bold">Are pets allowed at your property?</div>
                                <div class="uk-margin-top">
                                     <label style="display: inline-block; margin-right: 15px;"><input class="uk-radio" type="radio" value="yes" name="pets" checked="{pets === true}" onclick="{handlePetsChange}"> Yes</label>
                                     <label><input class="uk-radio" type="radio" name="pets" value="no" onclick="{handlePetsChange}" checked="{pets === false}"> No</label>
                                </div>

</div>
                            <div if="{pets_error}" class="uk-alert-danger" uk-alert>
                                <p>Please specify your pets policy</p>
                            </div>
                        </div>
                        <div class="{step === 7 ? '': 'hide'}">

<div class="uk-margin-bottom">
                                <div class="uk-text-bold">External/Common Area/Amenities Photos</div>
                                <div id="commondropzone" class="custom-dropzone uk-margin-top">
                                    <div class="dz-message">Please click here on the box & upload atleast 3 images</div>
                                </div>
                                <div if="{dropzone_error}" class="uk-alert-danger" uk-alert>
                                        <p>Please upload atleast 3 valid photos for Common Area/External/Amenities</p>
                                </div>
                                <hr />
                            </div>

<div each="{a,index in accommodation_types}" class="uk-margin-bottom">
                                <div>
                                    <div class="uk-text-bold">Photos For {a.name}</div>
                                    <div id="dropzone{index}" class="custom-dropzone uk-margin-top">
                                        <div class="dz-message">Please click here on the box & upload atleast 3 images</div>
                                    </div>
                                    <div if="{a.dropzone_error}" class="uk-alert-danger" uk-alert>
                                        <p>Please upload atleast 3 valid photos for {a.name}</p>
                                    </div>
                                    <hr />
                                </div>
                            </div>

</div>
                        <div class="{step === 8 ? '': 'hide'}">

<div class="uk-flex uk-flex-wrap uk-margin-bottom" uk-grid>
                                <div class="uk-width-1-3@m">
                                    <div class="uk-text-bold" style="margin-bottom: 5px;">Which currency do you operate in?</div>
                                    <select class="uk-select" onchange="{handleCurrencyChange}">
                                        <option each="{c in currencies}" value="{c.id}" selected="{c.id === currency}">{c.name} ({c.id})</option>
                                    </select>
                                </div>
                            </div>
                            <div each="{t,index in accommodation_types}" style="padding: 15px;border: 1px solid #dedede; margin-bottom: 20px;">
                                <div class="uk-text-bold" >Default Rates For {t.name}</div>
                                <hr />
                                <div class="uk-flex uk-flex-wrap" uk-grid>
                                     <div class="uk-width-1-5@m">
                                         <div style="margin-bottom: 5px;">Weekday Rate (Mon to Thu)</div>
                                         <input class="uk-input" type="text" placeholder="" oninput="{handleDefaultWeekdayRateInput(t)}" />
                                     </div>
                                     <div class="uk-width-1-5@m">
                                         <div style="margin-bottom: 5px;">Weekend Rate (Fri to Sun)</div>
                                         <input class="uk-input" type="text" placeholder="" oninput="{handleDefaultWeekendRateInput(t)}" />
                                     </div>
                                    <div class="uk-width-1-5@m">
                                        <div style="margin-bottom: 5px;">Rates Valid For Guests</div>
                                        <select class="uk-select" onchange="{handleDefaultBaseOccupancyInput(t)}">
                                            <option each="{i in t.base_occupancy_options}" selected="{t.default_rates.base_occupancy === i}">{i}</option>
                                        </select>
                                        <div class="uk-text-meta">Base Occupancy</div>
                                    </div>
                                    <div class="uk-width-1-5@m" if="{t.max_guests > t.default_rates.base_occupancy}">
                                         <div style="margin-bottom: 5px;">Extra Person Rate</div>
                                         <input class="uk-input" type="text" placeholder="" oninput="{handleDefaultExtraPersonRateInput(t)}" />
                                         <div class="uk-text-meta">For more than {t.default_rates.base_occupancy} guest</div>
                                     </div>
                                    <div class="uk-width-1-5@m">
                                        <div style="margin-bottom: 5px;">Meal Plan</div>
                                        <select class="uk-select" onchange="{handleMealPlanInput(t)}">
                                            <option each="{i in meal_plans}" value="{i.id}" selected="{i.id === t.default_rates.meal_plan}">{i.name}</option>
                                        </select>
                                        <button uk-toggle="target: #my-id1" type="button" class="uk-button uk-button-link">Show Meal Plans</button>
                                        <div id="my-id1" uk-modal>
                                            <div class="uk-modal-dialog uk-modal-body">
                                                <h2 class="uk-modal-title">Meal Plans</h2>
                                                <hr />
                                                <div each="{meal_plans}" class="uk-margin-bottom">
                                                    <div class="uk-text-bold" style="margin-bottom: 5px;">{name}</div>
                                                    <div>{desc}</div>

</div>
                                                <button class="uk-modal-close uk-button uk-button-default" type="button">Close</button>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="uk-width-1-5@m">
                                        <div style="margin-bottom: 5px;">Cancellation Policy</div>
                                        <select class="uk-select" onchange="{handleDefaultCancellationPolicyInput(t)}">
                                            <option each="{i in cancellation_policies}" value="{i.id}" selected="{i.id === t.default_rates.cancellation_policy}">{i.name}</option>
                                        </select>
                                        <button uk-toggle="target: #my-id" type="button" class="uk-button uk-button-link">Show Cancellation Policies</button>
                                        <div id="my-id" uk-modal>
                                            <div class="uk-modal-dialog uk-modal-body">
                                                <h2 class="uk-modal-title">Cancellation Policies</h2>
                                                <hr />
                                                <div each="{cancellation_policies}" class="uk-margin-bottom">
                                                    <div class="uk-text-bold" style="margin-bottom: 5px;">{name}</div>
                                                    <div>{desc}</div>

</div>
                                                <button class="uk-modal-close uk-button uk-button-default" type="button">Close</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div if="{t.weekday_rates_error}" class="uk-alert-danger" uk-alert>
                                    <p>Please specify valid weekday rate. Should be a number.</p>
                                </div>
                                <div if="{t.weekend_rates_error}" class="uk-alert-danger" uk-alert>
                                    <p>Please specify valid weekend rate. Should be a number.</p>
                                </div>
                            </div>

</div>
                        <div class="{step === 9 ? '': 'hide'}">
                            <div class="uk-text-bold uk-text-primary uk-margin-bottom" style="font-size: 1.25em;">{accommodation_types.length} Listing{accommodation_types.length > 1 ? 's':''} will be created with following information.</div>
                            <div each="{t,index in accommodation_types}" style="border: 1px solid #dedede; padding: 15px;margin-bottom: 20px;">
                                <div class="uk-text-bold"><span if="{accommodation_types.length > 1}">Listing {index+1} </span>Title: (Please edit the title as you deem fit.)<br />

</div>
                                <div style="margin-top: 10px;">
                                    <input class="uk-input" type="text" value="{t.title}" placeholder="Specify your own title for this listing" oninput="{handleTitleChange(t)}" />
                                </div>
                                <hr />
                                <div class="uk-flex uk-flex-wrap uk-flex-wrap-around amenities">
                                    <div><span class="uk-label">{city}, {state}, {country}</span></div>
                                    <div if="{brand}"><span class="uk-label">{brand}</span></div>
                                    <div><span class="uk-label">{type}</span></div>
                                    <div><span class="uk-label">{t.dropzone && dropzone ? (t.dropzone.getAcceptedFiles().length + dropzone.getAcceptedFiles().length) : 'No'} Photos</span></div>
                                    <div><span class="uk-label">{t.max_guests} Max Guests</span></div>
                                    <div if="{t.type}"><span class="uk-label">{t.type}</span></div>
                                    <div><span class="uk-label">{t.units} unit{t.units > 1 ? 's':''}</span></div>
                                    <div if="{t.bedrooms}"><span class="uk-label">{t.bedrooms} bedroom{t.bedrooms > 1 ? 's':''}</span></div>
                                    <div if="{t.bathrooms}"><span class="uk-label">{t.bathrooms} bathroom{t.bathrooms > 1 ? 's':''}</span></div>
                                    <div each="{a in t.amenities}"><span class="uk-label">{a}</span></div>
                                    <div each="{a in amenities}"><span class="uk-label">{a}</span></div>
                                    <div><span class="uk-label">{pets ? 'Pets Allowed': 'Pets Not Allowed'}</span></div>
                                    <div><span class="uk-label">{currency}{t.default_rates.weekday_rates} on weekdays for {t.default_rates.base_occupancy} guest{t.default_rates.base_occupancy > 1?'s':''}</span></div>
                                    <div><span class="uk-label">{currency}{t.default_rates.weekend_rates} on weekends for {t.default_rates.base_occupancy} guest{t.default_rates.base_occupancy > 1?'s':''}</span></div>
                                    <div><span class="uk-label">{currency}{t.default_rates.extra_person_rates} for extra person</span></div>
                                    <div><span class="uk-label">{get_meal_plan_name(t.default_rates.meal_plan)}</span></div>
                                    <div><span class="uk-label">{get_cancellation_policy_name(t.default_rates.cancellation_policy)} cancellation policy</span></div>
                                </div>
                                <div if="{t.title_error}" class="uk-alert-danger" uk-alert>
                                    <p>Please specify a valid title. Also keep it below 100 characters.</p>
                                </div>

</div>
                        </div>
                    </div>
                    <div class="uk-card-footer">
                        <a if="{step > 1}" href="#" class="uk-button uk-button-default" onclick="{previousStep}">Previous</a>
                        <a if="{step < 9}" href="#" class="uk-button uk-button-primary" style="float:right;" onclick="{nextStep}">Next</a>
                        <a if="{step == 9}" href="#" class="uk-button uk-button-primary" style="float:right;" onclick="{handleUpload}">Upload <span class="uk-visible@m">Your Listing{accommodation_types.length > 1 ? 's':''}</span></a>
                    </div>
                </div>
            </div>