{{ define "finder/props.tmpl" }}
	<div class="TitleBar DragArea">
		<button id="closeWindowButton" class="Button" title="Close Window"></button>
		<div id="Drag" class="VisualDragArea"></div>
		<div class="Lable">
			File Properties
		</div>
		<div id="Drag" class="VisualDragArea"></div>
	</div>
	<div class="ContentBorder">
			<div class="PropertiesList">
				<div class="Personal-properties-bio">
					<img src="data:{{ .headerProps.Icon.Header }},{{ .headerProps.Icon.Base64 }}" alt="File Icon" style="width: 48px;height: 48px;">
					<div class="Personal-properties-textbio">
						<div>{{ .file.Name }}</div>
						<!-- <div>{{ .headerProps.Info1 }}</div>
						<div>{{ .headerProps.Info2 }}</div> -->
					</div>
				</div> 
				{{ range $propIsland := .allprops }}
						<div id="prop" class="Personal-properties-prop">
							<div class="Personal-properties-prop-title">
								{{$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}}:
										{{ range $value := $prop.KeyComments }}
										<div class="Personal-properties-prop-key-comments">    
											{{ $value }} 
										</div>
										{{ end }}
									</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 }}