<!DOCTYPE html>
<html lang="en" data-ng-app="form" data-ng-controller="main">
<head>
<meta charset="utf-8" />
<title>Form Filling Sample</title>
<link rel="stylesheet" href="resources/styles/template.css" />
<script src="resources/scripts/angular.min.js"></script>
<script src="resources/scripts/app.js"></script>
</head>
<body>
<div id="photo">
<img data-ng-src="resources/images/{{data.image.source}}" alt="Photo of {{data.description}}" />
</div>
<div id="description"><span data-ng-bind="data.description"></span></div>
<div id="owner"><span data-ng-bind="data.owner"></span></div>
<div id="address"><span data-ng-bind="data.address"></span></div>
<div id="use"><span data-ng-bind="data.use"></span></div>
<div id="construction"><span data-ng-bind="data.construction"></span></div>
<div id="location-urban" class="checkbox"><span data-ng-if="data.location.type === 'urban'">❌</span></div>
<div id="location-suburban" class="checkbox"><span data-ng-if="data.location.type === 'suburban'">❌</span></div>
<div id="location-rural" class="checkbox"><span data-ng-if="data.location.type === 'rural'">❌</span></div>
<div id="location-other" class="checkbox"><span data-ng-if="data.location.type === 'other'">❌</span></div>
<div id="location-comments"><span data-ng-bind="data.location.comments"></span></div>
<div id="development-high" class="checkbox"><span data-ng-if="data.development.type === 'high'">❌</span></div>
<div id="development-medium" class="checkbox"><span data-ng-if="data.development.type === 'medium'">❌</span></div>
<div id="development-low" class="checkbox"><span data-ng-if="data.development.type === 'low'">❌</span></div>
<div id="development-other" class="checkbox"><span data-ng-if="data.development.type === 'other'">❌</span></div>
<div id="development-comments"><span data-ng-bind="data.development.comments"></span></div>
<div id="growth-rapid" class="checkbox"><span data-ng-if="data.growth.type === 'rapid'">❌</span></div>
<div id="growth-stable" class="checkbox"><span data-ng-if="data.growth.type === 'stable'">❌</span></div>
<div id="growth-slow" class="checkbox"><span data-ng-if="data.growth.type === 'slow'">❌</span></div>
<div id="growth-other" class="checkbox"><span data-ng-if="data.growth.type === 'other'">❌</span></div>
<div id="growth-comments"><span data-ng-bind="data.growth.comments"></span></div>
<div id="value-increasing" class="checkbox"><span data-ng-if="data.value.type === 'increasing'">❌</span></div>
<div id="value-stable" class="checkbox"><span data-ng-if="data.value.type === 'stable'">❌</span></div>
<div id="value-declining" class="checkbox"><span data-ng-if="data.value.type === 'declining'">❌</span></div>
<div id="value-other" class="checkbox"><span data-ng-if="data.value.type === 'other'">❌</span></div>
<div id="value-comments"><span data-ng-bind="data.value.comments"></span></div>
<div id="occupant-owner" class="checkbox"><span data-ng-if="data.occupant.type === 'owner'">❌</span></div>
<div id="occupant-tenant" class="checkbox"><span data-ng-if="data.occupant.type === 'tenant'">❌</span></div>
<div id="occupant-vacant" class="checkbox"><span data-ng-if="data.occupant.type === 'vacant'">❌</span></div>
<div id="occupant-other" class="checkbox"><span data-ng-if="data.occupant.type === 'other'">❌</span></div>
<div id="occupant-comments"><span data-ng-bind="data.occupant.comments"></span></div>
<div id="area"><span data-ng-bind="data.area"></span></div>
<div id="shape"><span data-ng-bind="data.shape"></span></div>
<div id="view"><span data-ng-bind="data.view"></span></div>
<div id="cost"><span data-ng-bind="data.cost"></span></div>
<div id="appraiser-name"><span data-ng-bind="data.appraiser.name"></span></div>
<div id="appraiser-date"><span data-ng-bind="data.appraiser.date"></span></div>
<div id="attribution">
Image by <a href={{data.image.attribution}}><span data-ng-bind="data.image.user"></span></a> from <a href="{{data.image.link}}">Pixabay</a>
</div>
</body>
</html>