<div class="app-card form-card tabs-card max-width expand-on-small">
<div class="app-inner inset-wide padding-bottom-none margin-top">
<h2 class="sr-only">Status Update</h2>
<div class="status-update expand-wide is-processing">
<h3 class="status-update_title">Update Status</h3>
<div class="status-update_action">
<button class="button dropdown-button has-icon--right text-align-left small is-processing" href="#" aria-expanded="false">
<span class="ui-icon ui-small" aria-hidden="true">
<svg>
<use xlink:href="#i-arrow-down"></use>
</svg>
</span>
Processing
</button>
<ul class="dropdown-menu" role="listbox" aria-hidden="true" aria-activedescendant tabindex="-1" style="display: none;">
<li class="dropdown-menu_item" role="option" aria-selected="false"><a href="#">This is a link</a></li>
<li class="dropdown-menu_item" role="option" aria-selected="false"><a href="#">This is another</a></li>
<li class="dropdown-menu_item is-selected" role="option" aria-selected="true"><a href="#">Yet another</a></li>
</ul>
</div>
<div class="status-update_message">
<div class="status-update_comment">
<p class="status-update_note">Some comment</p>
<span class="status-update_date">03/12/18 </span>
</div>
<div class="status-update_footer">
<button class="button tiny tertiary" type="button" data-event="">Add a comment</button>
<a href="#" class="t-small right">See Status History</a>
</div>
</div>
</div>
</div>
<div class="app-inner header-wide">
<h2 class="app-card_h2">Current Contact Information</h2>
</div>
<div class="app-inner inset-wide border-bottom">
<div class="form-grid row expand">
<div class="form-grid_item small-12 medium-6 large-3 column">
<div class="form-group">
<label for="textInput" class="">Text input</label>
<input type="text" id="textInput" name="textInput" placeholder="Type here" aria-describedby="described-id" />
</div>
</div>
<div class="form-grid_item small-12 medium-6 large-3 column">
<div class="form-group">
<label for="textInput" class="">Text input</label>
<input type="text" id="textInput" name="textInput" placeholder="Type here" aria-describedby="described-id" />
</div>
</div>
<div class="form-grid_item small-12 medium-6 large-3 column">
<div class="form-group">
<label for="textInput" class="">Text input</label>
<input type="text" id="textInput" name="textInput" placeholder="Type here" aria-describedby="described-id" />
</div>
</div>
</div>
</div>
<div class="app-inner subheader-wide">
<h3 class="app-card_h3 t-sans">Current Mailing Address</h3>
<p class="form-note max-width">If the applicant reports a different address than at time of application, please pay extra attention to their original proof of address.</p>
</div>
<div class="app-inner inset-wide border-bottom">
<div class="form-grid row expand">
<div class="form-grid_item small-12 medium-6 large-3 column">
<div class="form-group">
<label for="textInput" class="">Text input</label>
<input type="text" id="textInput" name="textInput" placeholder="Type here" aria-describedby="described-id" />
</div>
</div>
<div class="form-grid_item small-12 medium-6 large-3 column">
<div class="form-group">
<label for="textInput" class="">Text input</label>
<input type="text" id="textInput" name="textInput" placeholder="Type here" aria-describedby="described-id" />
</div>
</div>
</div>
<div class="form-grid row expand">
<div class="form-grid_item small-12 medium-6 large-3 column">
<div class="form-group">
<label for="textInput" class="">Text input</label>
<input type="text" id="textInput" name="textInput" placeholder="Type here" aria-describedby="described-id" />
</div>
</div>
<div class="form-grid_item small-12 medium-6 large-3 column">
<div class="row">
<div class="small-6 column">
<div class="form-group">
<label for="" class="">Text label</label>
<label for="options" class="sr-only">Label</label>
<select name="options" id="options" class="" data-width="auto">
<option value="">Select one</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select> </div>
</div>
<div class="small-6 column">
<div class="form-group">
<label for="textInput" class="">Text input</label>
<input type="text" id="textInput" name="textInput" placeholder="Type here" aria-describedby="described-id" />
</div>
</div>
</div>
</div>
</div>
</div>
<div class="app-inner header-wide">
<h2 class="app-card_h2">Confirmed Preferences</h2>
</div>
<div class="app-inner inset-wide border-bottom">
<div class="form-grid row expand">
<div class="small-12 column">
<div class="scrollable-table-container-under-xlarge">
<table class="td-light td-plain th-plain" role="grid">
<thead>
<tr>
<th scope="col"><span class="sr-only">Status Mark</span></th>
<th scope="col">Preference Name</th>
<th scope="col">Person who Claimed</th>
<th scope="col" class="text-right">Preference Rank</th>
<th scope="col">Type of Proof</th>
<th scope="col">Status</th>
<th scope="col" class="text-right">Actions</th>
</tr>
</thead>
<tbody>
<tr class="" aria-expanded="true">
<td scope="row">
<span class="ui-icon ui-medium i-success">
<svg>
<use xlink:href="#i-check"></use>
</svg>
</span>
</td>
<td>
Displaced Tenant Housing Preference
</td>
<td>
Jason Holmes
</td>
<td class="text-right">
12
</td>
<td>
</td>
<td>
Confirmed
</td>
<td class="text-right">
</td>
</tr>
<tr class="tr-expand is-expanded" aria-expanded="true">
<td scope="row">
<span class="ui-icon ui-medium i-alert">
<svg>
<use xlink:href="#i-close"></use>
</svg>
</span>
</td>
<td>
Neighborhood Resident Housing Preference
</td>
<td>
Jason Holmes
</td>
<td class="text-right">
25
</td>
<td>
<a href='#'>Cable Bill</a>
</td>
<td>
Invalid
</td>
<td class="text-right">
<a href='#' class='action-link' style='display: none'>Edit</a>
</td>
</tr>
<tr class="tr-expand-content is-expanded" aria-hidden="false">
<td colspan="7" class="td-expand-nested no-padding">
<div class="app-editable expand-wide scrollable-table-nested">
<div class="form-grid row">
<div class="form-grid_item small-12 medium-6 large-3 column">
<div class="form-group">
<label for="Neighborhood Resident Housing Preference" class="">Text label</label>
<div class="text-value " id="textValue" tabindex="0" aria-describedby="described-id">
Text value
</div>
</div>
</div>
<div class="form-grid_item small-12 medium-6 large-3 column">
<div class="form-group">
<label for="Neighborhood Resident Housing Preference" class="">Text input</label>
<input type="text" id="textInput" name="Neighborhood Resident Housing Preference" placeholder="Type here" aria-describedby="described-id" />
</div>
</div>
<div class="form-grid_item small-12 medium-6 large-3 column">
<div class="form-group">
<label for="Neighborhood Resident Housing Preference" class="">Text input</label>
<input type="text" id="textInput" name="Neighborhood Resident Housing Preference" placeholder="Type here" aria-describedby="described-id" />
</div>
</div>
<div class="form-grid_item small-12 medium-6 large-3 column">
<div class="form-group">
<label for="Neighborhood Resident Housing Preference" class="">Text input</label>
<input type="text" id="textInput" name="Neighborhood Resident Housing Preference" placeholder="Type here" aria-describedby="described-id" />
</div>
</div>
</div>
<div class="form-grid row">
<div class="form-grid_item small-12 medium-6 large-3 column">
<div class="form-group">
<label for="Neighborhood Resident Housing Preference" class="">Text input</label>
<input type="text" id="textInput" name="Neighborhood Resident Housing Preference" placeholder="Type here" aria-describedby="described-id" />
</div>
</div>
</div>
<div class="form-grid row">
<div class="form-grid_item column">
<button class="button primary tiny margin-right margin-bottom-none" type="button" data-event="">Save</button>
<button class="button secondary tiny margin-bottom-none" type="button" data-event="">Cancel</button>
</div>
</div>
</div>
</td>
</tr>
<tr class="" aria-expanded="true">
<td scope="row">
</td>
<td>
Live or Work Housing Preference
</td>
<td>
Jason Holmes
</td>
<td class="text-right">
112
</td>
<td>
<a href='#'>Cable Bill</a>
</td>
<td>
Unconfirmed
</td>
<td class="text-right">
<a href='#' class='action-link margin-bottom--half'>Confirm</a><br> <a href='#' class='action-link c-alert'>Remove</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="app-inner header-wide">
<h2 class="app-card_h2">Confirmed Household</h2>
</div>
<div class="app-inner subheader-wide">
<h3 class="app-card_h3 t-sans">Confirmed Household Members</h3>
</div>
<div class="app-inner inset-wide border-bottom">
<div class="form-grid row expand">
<div class="small-12 column">
<div class="scrollable-table-container">
<table class="td-small th-small td-nowrap td-light td-plain th-plain" role="grid">
<thead>
<tr>
<th scope="col">Type</th>
<th scope="col">Minimum Income</th>
<th scope="col" class="text-right">Rent</th>
</tr>
</thead>
<tbody>
<tr>
<td scope="row">Studio</td>
<td><em>none</em></td>
<td class="text-right">30% income</td>
</tr>
<tr>
<td scope="row">1 Bedroom</td>
<td><em>none</em></td>
<td class="text-right">30% income</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="app-inner subheader-wide">
<h3 class="app-card_h3 t-sans">Confirmed Reserved and Priority Units</h3>
</div>
<div class="app-inner inset-wide border-bottom">
<div class="form-grid row expand">
<div class="form-grid_item small-12 medium-6 large-3 column">
<div class="form-group">
<label for="" class="">Text label</label>
<div class="radio-group-inline ">
<p class="radio-inline">
<input type="radio" name="" value="-yes" id="-yes">
<label class="radio-inline_label" for="-yes">Yes</label>
</p>
<p class="radio-inline">
<input type="radio" name="" value="-no" id="-no">
<label class="radio-inline_label" for="-no">No</label>
</p>
</div>
</div>
</div>
<div class="form-grid_item small-12 medium-6 large-3 column">
<div class="form-group">
<label for="" class="">Text label</label>
<div class="radio-group-inline ">
<p class="radio-inline">
<input type="radio" name="" value="-yes" id="-yes">
<label class="radio-inline_label" for="-yes">Yes</label>
</p>
<p class="radio-inline">
<input type="radio" name="" value="-no" id="-no">
<label class="radio-inline_label" for="-no">No</label>
</p>
</div>
</div>
</div>
<div class="form-grid_item small-12 medium-6 large-3 column">
<div class="form-group">
<label for="" class="">Text label</label>
<div class="radio-group-inline ">
<p class="radio-inline">
<input type="radio" name="" value="-yes" id="-yes">
<label class="radio-inline_label" for="-yes">Yes</label>
</p>
<p class="radio-inline">
<input type="radio" name="" value="-no" id="-no">
<label class="radio-inline_label" for="-no">No</label>
</p>
</div>
</div>
</div>
<div class="form-grid_item small-12 medium-6 large-3 column">
<div class="form-group">
<label for="" class="">Text label</label>
<div class="checkbox-group form-checkbox-item" role="group">
<div class="checkbox-block">
<input type="checkbox" name="preferences" value="preferences-displaced" id="preferences-displaced">
<label class="checkbox-block_label" for="preferences-displaced">
Displaced Tenants Preference
</label>
</div>
<div class="checkbox-block">
<input type="checkbox" name="preferences" value="preferences-cop" id="preferences-cop">
<label class="checkbox-block_label" for="preferences-cop">
Certificate of Preference
</label>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="app-inner subheader-wide">
<h3 class="app-card_h3 t-sans">Confirmed Household Income</h3>
</div>
<div class="app-inner inset-wide border-bottom">
<div class="form-grid row expand padding-bottom">
<div class="form-grid_item small-12 medium-6 large-3 column">
<div class="form-group">
<label for="" class="">Text label</label>
<div class="radio-group-inline ">
<p class="radio-inline">
<input type="radio" name="" value="-yes" id="-yes">
<label class="radio-inline_label" for="-yes">Yes</label>
</p>
<p class="radio-inline">
<input type="radio" name="" value="-no" id="-no">
<label class="radio-inline_label" for="-no">No</label>
</p>
</div>
</div>
</div>
<div class="form-grid_item small-12 medium-6 large-3 column">
<div class="form-group">
<label for="textInput" class="">Some really long text copy that wraps</label>
<input type="text" id="textInput" name="textInput" placeholder="Type here" aria-describedby="described-id" />
</div>
</div>
<div class="form-grid_item small-12 medium-6 large-3 column">
<div class="form-group">
<label for="textInput" class="">Text input</label>
<input type="text" id="textInput" name="textInput" placeholder="Type here" aria-describedby="described-id" />
<span class="form-note shift-up" id="{{note}}-id">Same</span>
</div>
</div>
<div class="form-grid_item small-12 medium-6 large-3 column">
<div class="form-group">
<label for="textInput" class="">Text input</label>
<input type="text" id="textInput" name="textInput" placeholder="Type here" aria-describedby="described-id" />
<span class="form-note shift-up" id="{{note}}-id">Same</span>
</div>
</div>
</div>
<div class="form-grid row expand">
<div class="form-grid_item small-12 medium-6 large-3 column">
<div class="form-group">
<label for="textValue" class="">Text label</label>
<div class="text-value " id="textValue" tabindex="0" aria-describedby="described-id">
Text value
</div>
<span class="form-note shift-up" id="{{note}}-id">Same</span>
</div>
</div>
<div class="form-grid_item small-12 medium-6 large-3 column">
<div class="form-group">
<label for="textValue" class="">Text label</label>
<div class="text-value " id="textValue" tabindex="0" aria-describedby="described-id">
Text value
</div>
<span class="form-note shift-up" id="{{note}}-id">Same</span>
</div>
</div>
<div class="form-grid_item small-12 medium-6 large-3 column">
<div class="form-group">
<label for="textValue" class="">Text label</label>
<div class="text-value is-placeholder" id="textValue" tabindex="0" aria-describedby="described-id">
Some really long text copy that wraps
</div>
<span class="form-note shift-up" id="{{note}}-id">Same</span>
</div>
</div>
</div>
</div>
<div class="app-inner header-wide">
<h2 class="app-card_h2">Eligibility Rules Checklist</h2>
<p class="form-note max-width">Applicants must qualify under the rules of the building in the following order:</p>
</div>
<div class="app-inner inset-wide border-bottom">
<div class="form-grid row expand">
<div class="form-grid_item small-12 medium-8 column">
<div class="content-card">
<header class="content-card_ordered">
<span class="content-card_number">1 <sup>st</sup></span>
<h4 class="content-card_title no-margin">Certificate of Preference</h4>
<p class="c-steel">Up to 11 units available</p>
</header>
<p class="c-steel">Certificate of Preference holders are primarily households displaced by Agency action in Redevelopment Project Areas during the 1960s and 1970s, but may also include other persons displaced by Agency action.
</p>
</div>
<div class="content-card">
<header class="content-card_ordered">
<span class="content-card_number">1 <sup>st</sup></span>
<h4 class="content-card_title no-margin">Certificate of Preference</h4>
<p class="c-steel">Up to 11 units available</p>
</header>
<p class="c-steel">Certificate of Preference holders are primarily households displaced by Agency action in Redevelopment Project Areas during the 1960s and 1970s, but may also include other persons displaced by Agency action.
</p>
</div>
<div class="content-card">
<header class="content-card_ordered">
<span class="content-card_number">1 <sup>st</sup></span>
<h4 class="content-card_title no-margin">Certificate of Preference</h4>
<p class="c-steel">Up to 11 units available</p>
</header>
<p class="c-steel">Certificate of Preference holders are primarily households displaced by Agency action in Redevelopment Project Areas during the 1960s and 1970s, but may also include other persons displaced by Agency action.
</p>
</div>
<div class="padding-top margin-bottom"><a class="lined" href="#">See listing</a></div>
</div>
</div>
</div>
<div class="app-inner header-wide">
<h2 class="app-card_h2">Lease Information</h2>
</div>
<div class="app-inner inset-wide border-bottom">
<div class="form-grid row expand padding-bottom">
<div class="form-grid_item small-12 medium-6 large-3 column">
<div class="form-group">
<label for="" class="">Text label</label>
<label for="options" class="sr-only">Label</label>
<select name="options" id="options" class="" data-width="auto">
<option value="">Select one</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select> </div>
</div>
<div class="form-grid_item small-12 medium-6 large-3 column">
<div class="form-group">
<label for="textInput" class="">Text input</label>
<input type="text" id="textInput" name="textInput" placeholder="Type here" aria-describedby="described-id" />
</div>
</div>
</div>
<div class="form-grid row expand">
<div class="form-grid_item small-12 medium-6 large-3 column">
<div class="form-group">
<label for="textInput" class="">Text input</label>
<input type="text" id="textInput" name="textInput" placeholder="Type here" aria-describedby="described-id" />
<span class="form-note shift-up" id="{{note}}-id">Same</span>
</div>
</div>
<div class="form-grid_item small-12 medium-6 large-3 column">
<div class="form-group">
<label for="textInput" class="">Text input</label>
<input type="text" id="textInput" name="textInput" placeholder="Type here" aria-describedby="described-id" />
</div>
</div>
<div class="form-grid_item small-12 medium-6 large-3 column">
<div class="form-group">
<label for="textValue" class="">Text label</label>
<div class="text-value is-placeholder" id="textValue" tabindex="0" aria-describedby="described-id">
Text value
</div>
<span class="form-note shift-up" id="{{note}}-id">Same</span>
</div>
</div>
<div class="form-grid_item small-12 medium-6 large-3 column">
<div class="form-group">
<label for="textInput" class="">Text input</label>
<input type="text" id="textInput" name="textInput" placeholder="Type here" aria-describedby="described-id" />
</div>
</div>
</div>
</div>
<div class="app-inner subheader-wide">
<h3 class="app-card_h3 t-sans">Demographics</h3>
</div>
<div class="app-inner inset-wide border-bottom">
<div class="form-grid row expand">
<div class="form-grid_item small-12 medium-6 large-3 column">
<div class="form-group">
<label for="" class="">Text label</label>
<label for="options" class="sr-only">Label</label>
<select name="options" id="options" class="" data-width="auto">
<option value="">Select one</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select> </div>
</div>
<div class="form-grid_item small-12 medium-6 large-3 column">
<div class="form-group">
<label for="" class="">Text label</label>
<label for="options" class="sr-only">Label</label>
<select name="options" id="options" class="" data-width="auto">
<option value="">Select one</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select> </div>
</div>
</div>
</div>
<div class="app-inner subheader-wide">
<h3 class="app-card_h3 t-sans">Status History</h3>
</div>
<div class="app-inner inset-wide">
<div class="form-grid row expand">
<div class="form-grid_item small-12 column">
<div class="status-list">
<ul>
<li class="status-list_item">
<div class="status-list_tag is-default">No Status</div>
<div class="status-list_comment">
<p class="status-list_note">The first time I met this person</p>
<span class="status-list_date">01/01/18</span>
</div>
</li>
<li class="status-list_item">
<div class="status-list_tag is-processing">Processing</div>
<div class="status-list_comment">
<p class="status-list_note">The next time I met this person</p>
<span class="status-list_date">02/02/18</span>
</div>
</li>
<li class="status-list_item">
<div class="status-list_tag is-approved">Approved</div>
<div class="status-list_comment">
<p class="status-list_note">The last time I met this person</p>
<span class="status-list_date">03/03/18</span>
</div>
</li>
</ul>
<div class="status-list_footer">
<button class="button tertiary tiny margin-bottom-none" type="button" data-event="">Add a comment</button>
</div>
</div>
</div>
</div>
</div>
<div class="padding-bottom--2x margin-bottom--2x"></div>
<div class="button-pager">
<div class="button-pager_row align-buttons-left primary inset-wide">
<button class="button dropdown-button has-icon--right text-align-left small is-approved small has-status-width" href="#" aria-expanded="false">
<span class="ui-icon ui-small" aria-hidden="true">
<svg>
<use xlink:href="#i-arrow-down"></use>
</svg>
</span>
Approved
</button>
<ul class="dropdown-menu" role="listbox" aria-hidden="true" aria-activedescendant tabindex="-1" style="display: none;">
<li class="dropdown-menu_item" role="option" aria-selected="false"><a href="#">This is a link</a></li>
<li class="dropdown-menu_item" role="option" aria-selected="false"><a href="#">This is another</a></li>
<li class="dropdown-menu_item is-selected" role="option" aria-selected="true"><a href="#">Yet another</a></li>
</ul> <button class="button primary small" type="button" data-event="">Save</button>
</div>
</div>
</div>
<div class="app-card form-card tabs-card max-width expand-on-small">
<div class="app-inner inset-wide padding-bottom-none margin-top">
<h2 class="sr-only">Status Update</h2>
{{> @status-update classes="expand-wide is-processing"}}
</div>
<div class="app-inner header-wide">
<h2 class="app-card_h2">Current Contact Information</h2>
</div>
<div class="app-inner inset-wide border-bottom">
<div class="form-grid row expand">
<div class="form-grid_item small-12 medium-6 large-3 column">
<div class="form-group">
{{> @text-input }}
</div>
</div>
<div class="form-grid_item small-12 medium-6 large-3 column">
<div class="form-group">
{{> @text-input }}
</div>
</div>
<div class="form-grid_item small-12 medium-6 large-3 column">
<div class="form-group">
{{> @text-input }}
</div>
</div>
</div>
</div>
<div class="app-inner subheader-wide">
<h3 class="app-card_h3 t-sans">Current Mailing Address</h3>
<p class="form-note max-width">If the applicant reports a different address than at time of application, please pay extra attention to their original proof of address.</p>
</div>
<div class="app-inner inset-wide border-bottom">
<div class="form-grid row expand">
<div class="form-grid_item small-12 medium-6 large-3 column">
<div class="form-group">
{{> @text-input }}
</div>
</div>
<div class="form-grid_item small-12 medium-6 large-3 column">
<div class="form-group">
{{> @text-input }}
</div>
</div>
</div>
<div class="form-grid row expand">
<div class="form-grid_item small-12 medium-6 large-3 column">
<div class="form-group">
{{> @text-input }}
</div>
</div>
<div class="form-grid_item small-12 medium-6 large-3 column">
<div class="row">
<div class="small-6 column">
<div class="form-group">
<label for="" class="">{{default label "Text label"}}</label>
{{> @select }}
</div>
</div>
<div class="small-6 column">
<div class="form-group">
{{> @text-input }}
</div>
</div>
</div>
</div>
</div>
</div>
<div class="app-inner header-wide">
<h2 class="app-card_h2">Confirmed Preferences</h2>
</div>
<div class="app-inner inset-wide border-bottom">
<div class="form-grid row expand">
<div class="small-12 column">
<div class="scrollable-table-container-under-xlarge">
{{> @table--preferences classes="td-plain th-plain"}}
</div>
</div>
</div>
</div>
<div class="app-inner header-wide">
<h2 class="app-card_h2">Confirmed Household</h2>
</div>
<div class="app-inner subheader-wide">
<h3 class="app-card_h3 t-sans">Confirmed Household Members</h3>
</div>
<div class="app-inner inset-wide border-bottom">
<div class="form-grid row expand">
<div class="small-12 column">
<div class="scrollable-table-container">
{{> @table--percent classes="td-plain th-plain"}}
</div>
</div>
</div>
</div>
<div class="app-inner subheader-wide">
<h3 class="app-card_h3 t-sans">Confirmed Reserved and Priority Units</h3>
</div>
<div class="app-inner inset-wide border-bottom">
<div class="form-grid row expand">
<div class="form-grid_item small-12 medium-6 large-3 column">
<div class="form-group">
<label for="" class="">{{default label "Text label"}}</label>
{{> @radio-group--inline items=inputs.yesno }}
</div>
</div>
<div class="form-grid_item small-12 medium-6 large-3 column">
<div class="form-group">
<label for="" class="">{{default label "Text label"}}</label>
{{> @radio-group--inline items=inputs.yesno }}
</div>
</div>
<div class="form-grid_item small-12 medium-6 large-3 column">
<div class="form-group">
<label for="" class="">{{default label "Text label"}}</label>
{{> @radio-group--inline items=inputs.yesno }}
</div>
</div>
<div class="form-grid_item small-12 medium-6 large-3 column">
<div class="form-group">
<label for="" class="">{{default label "Text label"}}</label>
{{> @checkbox-group classes="form-checkbox-item"}}
</div>
</div>
</div>
</div>
<div class="app-inner subheader-wide">
<h3 class="app-card_h3 t-sans">Confirmed Household Income</h3>
</div>
<div class="app-inner inset-wide border-bottom">
<div class="form-grid row expand padding-bottom">
<div class="form-grid_item small-12 medium-6 large-3 column">
<div class="form-group">
<label for="" class="">{{default label "Text label"}}</label>
{{> @radio-group--inline items=inputs.yesno }}
</div>
</div>
<div class="form-grid_item small-12 medium-6 large-3 column">
<div class="form-group">
{{> @text-input label="Some really long text copy that wraps" }}
</div>
</div>
<div class="form-grid_item small-12 medium-6 large-3 column">
<div class="form-group">
{{> @text-input note="Same"}}
</div>
</div>
<div class="form-grid_item small-12 medium-6 large-3 column">
<div class="form-group">
{{> @text-input note="Same"}}
</div>
</div>
</div>
<div class="form-grid row expand">
<div class="form-grid_item small-12 medium-6 large-3 column">
<div class="form-group">
{{> @text-value note="Same"}}
</div>
</div>
<div class="form-grid_item small-12 medium-6 large-3 column">
<div class="form-group">
{{> @text-value note="Same"}}
</div>
</div>
<div class="form-grid_item small-12 medium-6 large-3 column">
<div class="form-group">
{{> @text-value value="Some really long text copy that wraps" value-classes="is-placeholder" note="Same"}}
</div>
</div>
</div>
</div>
<div class="app-inner header-wide">
<h2 class="app-card_h2">Eligibility Rules Checklist</h2>
<p class="form-note max-width">Applicants must qualify under the rules of the building in the following order:</p>
</div>
<div class="app-inner inset-wide border-bottom">
<div class="form-grid row expand">
<div class="form-grid_item small-12 medium-8 column">
{{> @content-card--ordered }}
{{> @content-card--ordered }}
{{> @content-card--ordered }}
<div class="padding-top margin-bottom"><a class="lined" href="#">See listing</a></div>
</div>
</div>
</div>
<div class="app-inner header-wide">
<h2 class="app-card_h2">Lease Information</h2>
</div>
<div class="app-inner inset-wide border-bottom">
<div class="form-grid row expand padding-bottom">
<div class="form-grid_item small-12 medium-6 large-3 column">
<div class="form-group">
<label for="" class="">{{default label "Text label"}}</label>
{{> @select }}
</div>
</div>
<div class="form-grid_item small-12 medium-6 large-3 column">
<div class="form-group">
{{> @text-input }}
</div>
</div>
</div>
<div class="form-grid row expand">
<div class="form-grid_item small-12 medium-6 large-3 column">
<div class="form-group">
{{> @text-input note="Same"}}
</div>
</div>
<div class="form-grid_item small-12 medium-6 large-3 column">
<div class="form-group">
{{> @text-input }}
</div>
</div>
<div class="form-grid_item small-12 medium-6 large-3 column">
<div class="form-group">
{{> @text-value value-classes="is-placeholder" note="Same"}}
</div>
</div>
<div class="form-grid_item small-12 medium-6 large-3 column">
<div class="form-group">
{{> @text-input }}
</div>
</div>
</div>
</div>
<div class="app-inner subheader-wide">
<h3 class="app-card_h3 t-sans">Demographics</h3>
</div>
<div class="app-inner inset-wide border-bottom">
<div class="form-grid row expand">
<div class="form-grid_item small-12 medium-6 large-3 column">
<div class="form-group">
<label for="" class="">{{default label "Text label"}}</label>
{{> @select }}
</div>
</div>
<div class="form-grid_item small-12 medium-6 large-3 column">
<div class="form-group">
<label for="" class="">{{default label "Text label"}}</label>
{{> @select }}
</div>
</div>
</div>
</div>
<div class="app-inner subheader-wide">
<h3 class="app-card_h3 t-sans">Status History</h3>
</div>
<div class="app-inner inset-wide">
<div class="form-grid row expand">
<div class="form-grid_item small-12 column">
{{render '@status-list'}}
</div>
</div>
</div>
<div class="padding-bottom--2x margin-bottom--2x"></div>
<div class="button-pager">
<div class="button-pager_row align-buttons-left primary inset-wide">
{{> @button-dropdown text="Approved" classes="is-approved small has-status-width"}}
{{> @button text="Save" classes="primary small"}}
</div>
</div>
</div>
{
"tables": {
"minimum": {
"units": [
{
"type": "Studio",
"income": "2,347",
"rent": 939
},
{
"type": "1 Bedroom",
"income": "2,685",
"rent": "1,074"
},
{
"type": "2 Bedroom",
"income": "2,998",
"rent": "1,199"
}
]
},
"minimum-range": {
"units": [
{
"type": "Studio",
"income-low": "$1,347",
"income-high": "$1,678",
"rent-low": "$639",
"rent-high": "$839"
},
{
"type": "1 BR",
"income-low": "$1,518",
"income-high": "$1,958",
"rent-low": "$759",
"rent-high": "$979"
},
{
"type": "2 BR",
"income-low": "$2,185",
"income-high": "$2,685",
"rent-low": "$939",
"rent-high": "$1,250"
}
]
},
"minimum-sale": {
"units": [
{
"type": "Studio",
"parking": "no parking",
"price": "$223,548",
"hoa": "$637.15"
},
{
"type": "1 BR",
"parking": "with parking",
"price": "$256,721",
"hoa": "$625.46"
}
]
},
"minimum-sro": {
"units": [
{
"type": "SRO",
"income": "1,347",
"rent": 639
}
]
},
"percent": {
"units": [
{
"type": "Studio",
"income": "<em>none</em>",
"rent": "30% income"
},
{
"type": "1 Bedroom",
"income": "<em>none</em>",
"rent": "30% income"
}
]
},
"maximum": {
"households": [
{
"size": 1,
"month": "3,245",
"year": "38,950"
},
{
"size": 2,
"month": "3,708",
"year": "44,500"
},
{
"size": 3,
"month": "4,204",
"year": "50,450"
},
{
"size": 4,
"month": "4,670",
"year": "56,050"
},
{
"size": 5,
"month": "5,045",
"year": "60,550"
},
{
"size": 6,
"month": "5,416",
"year": "65,000"
}
]
},
"maximum-ami": {
"households": [
{
"size": 1,
"month": "30,245",
"year": "38,950"
},
{
"size": 2,
"month": "30,708",
"year": "44,500"
},
{
"size": 3,
"month": "40,204",
"year": "50,450"
},
{
"size": 4,
"month": "40,670",
"year": "56,050"
},
{
"size": 5,
"month": "50,045",
"year": "60,550"
},
{
"size": 6,
"month": "50,416",
"year": "65,000"
}
]
},
"minimum-flex": [
{
"type": "Studio",
"income": "$2,347<small>/month</small>",
"rent": "$939<small>/month</small>",
"availability": "1 <small>unit</small>"
},
{
"type": "1 Bedroom",
"income": "$2,685<small>/month</small>",
"rent": "$1,074<small>/month</small>",
"availability": "2 <small>units</small>"
},
{
"type": "2 Bedroom",
"income": "$2,998<small>/month</small>",
"rent": "$1,199<small>/month</small>",
"availability": "9 <small>units</small>"
}
],
"minimum-flex-reserved": [
{
"type": "Studio",
"income": "<em>none</em>",
"rent": "30%<small> income</small>",
"availability": "1 <small>unit</small>",
"reserved": true,
"icon": "star"
},
{
"type": "Studio",
"income": "<em>none</em>",
"rent": "30%<small> income</small>",
"availability": "<em>waitlist</em>",
"reserved": true,
"icon": "star"
},
{
"type": "Studio",
"income": "<em>none</em>",
"rent": "30%<small> income</small>",
"availability": "1 <small>unit</small>",
"reserved": true
},
{
"type": "Studio",
"income": "$1,957<small>/month</small>",
"rent": "30%<small> income</small>",
"availability": "1 <small>unit</small>",
"reserved": true
},
{
"type": "Studio",
"income": "$2,347<small>/month</small>",
"rent": "$939<small>/month</small>",
"availability": "1 <small>unit</small>"
},
{
"type": "Studio",
"income": "$2,347<small>/month</small>",
"rent": "$939<small>/month</small>",
"availability": "<em>waitlist</em>"
},
{
"type": "1 Bedroom",
"income": "$2,685<small>/month</small>",
"rent": "30%<small> income</small>",
"availability": "2 <small>units</small>",
"reserved": true
}
],
"occupancy": {
"units": [
{
"type": "Studio",
"occupancy": "1-2"
},
{
"type": "1 Bedroom",
"occupancy": "1-3"
},
{
"type": "2 Bedroom",
"occupancy": "2-4"
},
{
"type": "3 Bedroom",
"occupancy": "3-6"
}
]
},
"pricing-rent": [
{
"ami": "40%",
"list": [
{
"type": "Studio",
"units": [
{
"income": "$2,112",
"rent": "$1,056",
"availability": 1,
"reserved": true
},
{
"income": "$2,312",
"rent": "$1,250",
"availability": 4,
"reserved": true
}
]
},
{
"type": "1 BR",
"units": [
{
"income": "$2,514",
"rent": "$1,257",
"waitlist": true
},
{
"income": "$2,712",
"rent": "$1,750",
"availability": 4
}
]
}
]
},
{
"ami": "50%",
"list": [
{
"type": "Studio",
"units": [
{
"income": "$2,000",
"rent": "$1,000",
"availability": 28
}
]
},
{
"type": "1 BR",
"units": [
{
"income": "$2,280",
"rent": "$1,140",
"availability": 26
}
]
},
{
"type": "2 BR",
"units": [
{
"income": "$2,540",
"rent": "$1,270",
"availability": 1
}
]
}
]
}
],
"pricing-sale": [
{
"ami": "40%",
"list": [
{
"type": "1 BR",
"units": [
{
"price-no-parking": "$183,142",
"hoa-no-parking": "$637",
"availability": 2,
"lease": "$637"
},
{
"price-no-parking": "$185,309",
"hoa-no-parking": "$625",
"availability": 12,
"lease": "$637"
}
]
},
{
"type": "2 BR",
"units": [
{
"price-no-parking": "$254,562",
"hoa-no-parking": "$723",
"availability": 2,
"lease": "$637"
},
{
"price-no-parking": "$259,625",
"hoa-no-parking": "$695",
"availability": 5,
"lease": "$637"
}
]
},
{
"type": "3 BR",
"units": [
{
"price-no-parking": "$287,637",
"hoa-no-parking": "$782",
"availability": 5,
"lease": "$637"
}
]
}
]
}
],
"pricing-sro": [
{
"type": "SRO",
"income": "$1,356",
"rent": "$678",
"availability": 12
}
],
"priority": {
"units": [
{
"type": "Served in US Military",
"occupancy": 2
},
{
"type": "Person with Mobility Impairment",
"occupancy": 3
},
{
"type": "Person with Developmental Disability",
"occupancy": 4
}
]
},
"features": {
"studio": {
"units": [
{
"unit": "#127",
"area": 469,
"baths": 1,
"floor": "1st",
"acccessibilty": "Wheelchair access"
}
]
},
"1br": {
"units": [
{
"unit": "#127",
"area": 469,
"baths": 1,
"floor": "1st",
"acccessibilty": "Wheelchair access"
},
{
"unit": "#127",
"area": 469,
"baths": 1,
"floor": "1st",
"acccessibilty": "Wheelchair access"
},
{
"unit": "#127",
"area": 469,
"baths": 1,
"floor": "1st",
"acccessibilty": "Wheelchair access"
},
{
"unit": "#127",
"area": 469,
"baths": 1,
"floor": "1st",
"acccessibilty": "Wheelchair access"
},
{
"unit": "#127",
"area": 469,
"baths": 1,
"floor": "1st",
"acccessibilty": "Wheelchair access"
},
{
"unit": "#127",
"area": 469,
"baths": 1,
"floor": "1st",
"acccessibilty": "Wheelchair access"
}
]
}
},
"feature-summary": {
"types": [
{
"type": "Studio",
"units": "1 Unit",
"area": "639–900",
"acccessibilty": "Accessible units"
},
{
"type": "1 Bedroom",
"units": "6 Units",
"area": "639–900",
"acccessibilty": "Accessible units"
}
]
},
"fees": {
"types": [
{
"type": "Application Fee",
"amount": "$40",
"note": "per applicant age 18 and over, due post lottery"
},
{
"type": "Deposit",
"amount": "$500 - 941",
"note": "or one month's rent, may be higher for lower credit scores"
},
{
"type": "Rental Late Fee",
"amount": "$50",
"note": "after the 6th business day, rent due first of the month"
},
{
"type": "Returned Check Fee",
"amount": "$35",
"note": "due in event of insufficient funds"
},
{
"type": "Pet Rent",
"amount": "$65",
"note": "monthly per pet"
},
{
"type": "Pet Deposit",
"amount": "$500",
"note": "per pet, refundable"
},
{
"type": "Storage Unit Fee",
"amount": "$75",
"note": "per month, optional"
},
{
"type": "Bike Room Fee",
"amount": "$15",
"note": "per month, optional"
},
{
"type": "Replacement Fobs",
"amount": "$50",
"note": "for each replacement"
},
{
"type": "Replacement Remotes",
"amount": "$50",
"note": "for each replacement"
},
{
"type": "Utilities",
"note": "The building pays water, sewer and trash only. Tenants are responsible for all other utilities"
}
]
},
"preferences": {
"leaseup": [
{
"icon": "check",
"icon-fill": "success",
"name": "Displaced Tenant Housing Preference",
"person": "Jason Holmes",
"rank": 12,
"proof": null,
"status": "Confirmed",
"action": null
},
{
"icon": "close",
"icon-fill": "alert",
"name": "Neighborhood Resident Housing Preference",
"person": "Jason Holmes",
"rank": 25,
"proof": "<a href='#'>Cable Bill</a>",
"status": "Invalid",
"action": "<a href='#' class='action-link' style='display: none'>Edit</a>",
"editable": "editable"
},
{
"icon": null,
"name": "Live or Work Housing Preference",
"person": "Jason Holmes",
"rank": 112,
"proof": "<a href='#'>Cable Bill</a>",
"status": "Unconfirmed",
"action": "<a href='#' class='action-link margin-bottom--half'>Confirm</a><br> <a href='#' class='action-link c-alert'>Remove</a>"
}
]
},
"applicants": [
{
"preference": "COP 1",
"application": "APP-111-2223",
"first": "Anne",
"last": "Bowler",
"phone": "646-248-1112",
"address": "4106 Terrace St",
"update": "none",
"status": "Status",
"row_status": null,
"button_status": "tertiary"
},
{
"preference": "COP 2",
"application": "APP-111-2223",
"first": "Beth",
"last": "Bowler",
"phone": "646-248-1112",
"address": "4106 Terrace St",
"update": "none",
"status": "Processing",
"row_status": "is-processing",
"button_status": "is-processing"
},
{
"preference": "COP 3",
"application": "APP-111-2223",
"first": "Beth",
"last": "Bowler",
"phone": "646-248-1112",
"address": "4106 Terrace St",
"update": "none",
"status": "Disqualified",
"row_status": "is-disqualified",
"button_status": "is-disqualified"
},
{
"preference": "COP 4",
"application": "APP-111-2223",
"first": "Beth",
"last": "Bowler",
"phone": "646-248-1112",
"address": "4106 Terrace St",
"update": "none",
"status": "Approved",
"row_status": "is-approved",
"button_status": "is-approved"
},
{
"preference": "COP 5",
"application": "APP-111-2223",
"first": "Beth",
"last": "Bowler",
"phone": "646-248-1112",
"address": "4106 Terrace St",
"update": "none",
"status": "Waitlisted",
"row_status": "is-waitlisted",
"button_status": "is-waitlisted"
},
{
"preference": "COP 6",
"application": "APP-111-2223",
"first": "Beth",
"last": "Bowler",
"phone": "646-248-1112",
"address": "4106 Terrace St",
"update": "none",
"status": "Appealed",
"row_status": "is-appealed",
"button_status": "is-appealed"
},
{
"preference": "COP 7",
"application": "APP-111-2223",
"first": "Beth",
"last": "Bowler",
"phone": "646-248-1112",
"address": "4106 Terrace St",
"update": "none",
"status": "Withdrawn",
"row_status": "is-withdrawn",
"button_status": "is-withdrawn"
},
{
"preference": "COP 8",
"application": "APP-111-2223",
"first": "Beth",
"last": "Bowler",
"phone": "646-248-1112",
"address": "4106 Terrace St",
"update": "none",
"status": "Lease Signed",
"invalid_status": "is-invalid",
"row_status": "is-leased",
"button_status": "is-leased"
},
{
"preference": "COP 9",
"application": "APP-111-2223",
"first": "Anne",
"last": "Bowler",
"phone": "646-248-1112",
"address": "4106 Terrace St",
"update": "none",
"status": "Processing",
"invalid_status": "is-invalid",
"row_status": "is-processing",
"button_status": "is-processing"
}
]
},
"inputs": {
"yesno": [
{
"name": "Yes",
"value": "yes"
},
{
"name": "No",
"value": "no"
}
],
"preferences": [
{
"name": "Displaced Tenants Preference",
"note": "Primarily households displaced by Ellis Act evictions as defined by The Ellis Act Displacement Emergency Assistance Ordinance passed into law on December 18, 2013. (Formerly Ellis Act Preference)",
"value": "displaced"
},
{
"name": "Certificate of Preference",
"note": "Primarily households displaced by Agency action in Redevelopment Project Areas during the 1960’s and 1970's, but may also include other persons displaced by Agency action.",
"value": "cop"
}
]
},
"menus": {
"lang": [
{
"name": "English",
"active": true,
"url": "application-expect.html",
"selected": true,
"index": null,
"id": "panel1"
},
{
"name": "Español",
"url": "application-expect--es.html",
"selected": null,
"index": -1,
"id": "panel2"
},
{
"name": "ä¸æ–‡",
"chinese": true,
"url": "application-expect--zh.html",
"selected": null,
"index": -1,
"id": "panel3"
},
{
"name": "Filipino",
"url": "#",
"selected": null,
"index": -1,
"id": "panel4"
}
],
"mobile": [
{
"name": "Browse Properties",
"icon": "browse"
},
{
"name": "Get Assistance",
"icon": "assistance"
},
{
"name": "My Favorites",
"icon": "favorite"
},
{
"name": "Eligibility Settings",
"icon": "eligibility"
},
{
"name": "Account Settings",
"icon": "settings"
},
{
"name": "Sign Out"
}
],
"shortform": [
{
"name": "You",
"active": true
},
{
"name": "Household",
"disabled": true
},
{
"name": "Preferences",
"disabled": true
},
{
"name": "Income",
"disabled": true
},
{
"name": "Review",
"disabled": true
}
]
},
"buckets": [
{
"name": "Certificate of Preference",
"units": "up to 50 units",
"applicants": "10 applicants on this list",
"rank": "10",
"overall": "Your ranking in this list is 10 out of of 10 qualified applicants.",
"has-stat": true
},
{
"name": "Displaced Tenants Housing Preference",
"units": "up to 10 units",
"applicants": "15 applicants on this list",
"rank": "15",
"overall": "Your ranking in this list is 15 out of of 15 qualified applicants.",
"has-stat": true
},
{
"name": "Neighborhood Resident Housing Preference",
"units": "up to 20 units",
"applicants": "1200 applicants on this list",
"download": true,
"rank": "285",
"overall": "Your ranking in this list is 285 out of of 1200 qualified applicants.",
"has-stat": true
},
{
"name": "Live/Work Preference",
"units": "any remaining units",
"applicants": "2800 applicants on this list",
"download": true,
"rank": "385",
"overall": "Your ranking in this list is 385 out of of 2800 qualified applicants.",
"has-stat": true
}
]
}
There are no notes for this item.