319 lines
11 KiB
HTML
319 lines
11 KiB
HTML
<div class="modal" role="dialog">
|
|
<div class="modal-background"></div>
|
|
<div class="modal-card">
|
|
<header class="modal-card-head">
|
|
<h3 class="modal-card-title">
|
|
Add <span class="alias" data-alias="Occupant"></span>
|
|
</h3>
|
|
<button
|
|
class="delete is-close-modal-button"
|
|
aria-label="close"
|
|
type="button"
|
|
></button>
|
|
</header>
|
|
<section class="modal-card-body">
|
|
<div class="tabs is-boxed">
|
|
<ul>
|
|
<li class="is-active">
|
|
<a href="#tab--lotOccupancyOccupantAdd-new">
|
|
<span class="icon is-small">
|
|
<i class="fas fa-plus" aria-hidden="true"></i>
|
|
</span>
|
|
<span>Create New</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="#tab--lotOccupancyOccupantAdd-copy">
|
|
<span class="icon is-small">
|
|
<i class="fas fa-copy" aria-hidden="true"></i>
|
|
</span>
|
|
<span>Copy Previous</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="tab-container">
|
|
<div id="tab--lotOccupancyOccupantAdd-new">
|
|
<form id="form--lotOccupancyOccupantAdd">
|
|
<input
|
|
id="lotOccupancyOccupantAdd--lotOccupancyId"
|
|
name="lotOccupancyId"
|
|
type="hidden"
|
|
value=""
|
|
/>
|
|
<label
|
|
class="label"
|
|
for="lotOccupancyOccupantAdd--lotOccupantTypeId"
|
|
><span class="alias" data-alias="Occupant"></span> Type</label
|
|
>
|
|
<div class="field has-addons">
|
|
<div class="control is-expanded">
|
|
<div class="select is-fullwidth">
|
|
<select
|
|
id="lotOccupancyOccupantAdd--lotOccupantTypeId"
|
|
name="lotOccupantTypeId"
|
|
required
|
|
>
|
|
<option value="" data-font-awesome-icon-class="user">(Select a Type)</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="control">
|
|
<span class="button is-static" id="lotOccupancyOccupantAdd--fontAwesomeIconClass">
|
|
<i class="fas fa-fw fa-user" aria-hidden="true"></i>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="columns mt-2 mb-0">
|
|
<div class="column">
|
|
<div class="field">
|
|
<label class="label" for="lotOccupancyOccupantAdd--occupantName"
|
|
><span class="alias" data-alias="Occupant"></span> Name</label
|
|
>
|
|
<div class="control">
|
|
<input
|
|
class="input"
|
|
id="lotOccupancyOccupantAdd--occupantName"
|
|
name="occupantName"
|
|
type="text"
|
|
maxlength="200"
|
|
autocomplete="off"
|
|
required
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="column">
|
|
<div class="field">
|
|
<label class="label" for="lotOccupancyOccupantAdd--occupantFamilyName"
|
|
>Family Name</label
|
|
>
|
|
<div class="control">
|
|
<input
|
|
class="input"
|
|
id="lotOccupancyOccupantAdd--occupantFamilyName"
|
|
name="occupantFamilyName"
|
|
type="text"
|
|
maxlength="200"
|
|
autocomplete="off"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="field">
|
|
<label
|
|
class="label"
|
|
for="lotOccupancyOccupantAdd--occupantAddress1"
|
|
>Address</label
|
|
>
|
|
<div class="control">
|
|
<input
|
|
class="input"
|
|
id="lotOccupancyOccupantAdd--occupantAddress1"
|
|
name="occupantAddress1"
|
|
type="text"
|
|
maxlength="50"
|
|
placeholder="Line 1"
|
|
autocomplete="off"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="field">
|
|
<div class="control">
|
|
<input
|
|
class="input"
|
|
id="lotOccupancyOccupantAdd--occupantAddress2"
|
|
name="occupantAddress2"
|
|
type="text"
|
|
maxlength="50"
|
|
placeholder="Line 2"
|
|
autocomplete="off"
|
|
aria-label="Address Line 2"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="columns">
|
|
<div class="column">
|
|
<div class="field">
|
|
<label
|
|
class="label"
|
|
for="lotOccupancyOccupantAdd--occupantCity"
|
|
>City</label
|
|
>
|
|
<div class="control">
|
|
<input
|
|
class="input"
|
|
id="lotOccupancyOccupantAdd--occupantCity"
|
|
name="occupantCity"
|
|
type="text"
|
|
maxlength="20"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="column">
|
|
<div class="field">
|
|
<label
|
|
class="label"
|
|
for="lotOccupancyOccupantAdd--occupantProvince"
|
|
>Province</label
|
|
>
|
|
<div class="control">
|
|
<input
|
|
class="input"
|
|
id="lotOccupancyOccupantAdd--occupantProvince"
|
|
name="occupantProvince"
|
|
type="text"
|
|
maxlength="2"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="column">
|
|
<div class="field">
|
|
<label
|
|
class="label"
|
|
for="lotOccupancyOccupantAdd--occupantPostalCode"
|
|
>Postal Code</label
|
|
>
|
|
<div class="control">
|
|
<input
|
|
class="input"
|
|
id="lotOccupancyOccupantAdd--occupantPostalCode"
|
|
name="occupantPostalCode"
|
|
type="text"
|
|
maxlength="7"
|
|
autocomplete="off"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="columns">
|
|
<div class="column">
|
|
<label
|
|
class="label"
|
|
for="lotOccupancyOccupantAdd--occupantPhoneNumber"
|
|
>Phone Number</label
|
|
>
|
|
<div class="field">
|
|
<div class="control has-icons-left">
|
|
<input
|
|
class="input"
|
|
id="lotOccupancyOccupantAdd--occupantPhoneNumber"
|
|
name="occupantPhoneNumber"
|
|
type="text"
|
|
maxlength="30"
|
|
autocomplete="off"
|
|
/>
|
|
<span class="icon is-small is-left">
|
|
<i class="fas fa-phone" aria-hidden="true"></i>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="column">
|
|
<label
|
|
class="label"
|
|
for="lotOccupancyOccupantAdd--occupantEmailAddress"
|
|
>Email Address</label
|
|
>
|
|
<div class="field">
|
|
<div class="control has-icons-left">
|
|
<input
|
|
class="input"
|
|
id="lotOccupancyOccupantAdd--occupantEmailAddress"
|
|
name="occupantEmailAddress"
|
|
type="email"
|
|
maxlength="200"
|
|
autocomplete="off"
|
|
/>
|
|
<span class="icon is-small is-left">
|
|
<i class="fas fa-envelope" aria-hidden="true"></i>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="field">
|
|
<label
|
|
class="label"
|
|
id="lotOccupancyOccupantAdd--occupantCommentTitle"
|
|
for="lotOccupancyOccupantAdd--occupantComment"
|
|
>Comment</label
|
|
>
|
|
<div class="control">
|
|
<textarea
|
|
class="textarea"
|
|
id="lotOccupancyOccupantAdd--occupantComment"
|
|
name="occupantComment"
|
|
></textarea>
|
|
</div>
|
|
</div>
|
|
<div class="has-text-right">
|
|
<button class="button is-success" type="submit">
|
|
<span class="icon"
|
|
><i class="fas fa-plus" aria-hidden="true"></i
|
|
></span>
|
|
<span
|
|
>Add <span class="alias" data-alias="Occupant"></span
|
|
></span>
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div class="is-hidden" id="tab--lotOccupancyOccupantAdd-copy">
|
|
<div class="box">
|
|
<div class="field mb-4">
|
|
<label
|
|
class="label"
|
|
for="lotOccupancyOccupantCopy--lotOccupantTypeId"
|
|
>New <span class="alias" data-alias="Occupant"></span> Type</label
|
|
>
|
|
<div class="control">
|
|
<div class="select is-fullwidth">
|
|
<select
|
|
id="lotOccupancyOccupantCopy--lotOccupantTypeId"
|
|
name="lotOccupantTypeId"
|
|
required
|
|
>
|
|
<option value="">(Select a Type)</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<form id="form--lotOccupancyOccupantCopy">
|
|
<input name="limit" type="hidden" value="50" />
|
|
<div class="field">
|
|
<label
|
|
class="label"
|
|
for="lotOccupancyOccupantCopy--searchFilter"
|
|
>Find a Previously Used <span class="alias" data-alias="Occupant"></span></label
|
|
>
|
|
<div class="control has-icons-left">
|
|
<input
|
|
class="input"
|
|
id="lotOccupancyOccupantCopy--searchFilter"
|
|
name="searchFilter"
|
|
type="text"
|
|
placeholder="Filter by name or address"
|
|
/>
|
|
<span class="icon is-left">
|
|
<i class="fas fa-filter" aria-hidden="true"></i>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div id="lotOccupancyOccupantCopy--searchResults"></div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<footer class="modal-card-foot justify-right">
|
|
<button class="button is-close-modal-button" type="button">Cancel</button>
|
|
</footer>
|
|
</div>
|
|
</div>
|