{{ define "personal-properties/app.tmpl" }}
<div id="RootWidget" class="Application" style="width: 350px;height: 450px;" > 
    <div id="WindowBorder" class="Frame">
        <div id="TestWindowHeader" class="WindowFrameTopBar">
            <button id="closeWindowButton" class="WindowFrameTopBarButton" ></button>
            <div id="Drag" class="WindowDragArea"></div>
            <div class="WindowFrameTitle">
                Test Title
            </div>
            <div id="Drag" class="WindowDragArea"></div>
            <!-- <button class="WindowFrameTopBarButton" ></button> -->
        </div>
        <div id="ContentFrame" class="ContentFrame">
			<div class="Personal-properties-bio">
				<img src="res/img/default-avatar-photo-placeholder-profile-picture-vector.jpg" style="width: 48px;height: 48px;">
				<div class="Personal-properties-textbio">
					<div>{{ .Name }}</div>
					<div>{{ .BasicBio }}</div>
				</div>
			</div>
			{{ range $propIsland := .allprops }}
				<div id="prop" class="Personal-properties-prop">
					<div class="Personal-properties-prop-header">
						{{$propIsland.Header}}:
					</div>
					<div class="Personal-properties-prop-content">
						{{range $prop := $propIsland.Props}}
						<div class="Personal-properties-prop-row">
							<div class="Personal-properties-prop-key">{{$prop.Key}}:</div>
							<div class="Personal-properties-prop-values">
								{{ range $value := $prop.Values }}
								<div class="Personal-properties-prop-value">    
									{{ $value }} 
								</div>
								{{ end }}
							</div>
						</div>
					{{ end }}
					</div>
				</div>  


			{{ end }}
        </div>
    </div>
</div>
	
{{ end }}