{{#if notes}}
<div id="notes-grid-div" class="notes-grid">
	{{#each notes}}
	<div class="note-grid-item">
		<div class="quicknote noselect {{#if isshared}}shared{{/if}} {{#if sharedwith}}shareowner{{/if}}" style="background-color: {{color}}" data-id="{{ id }}" data-timestamp="{{ timestamp }}" >
			{{#if isshared}}
			<div>
				<div class='icon-share shared-title' title="Shared by {{ userid }}"></div>
				<div class='note-title'>
					{{{ title }}}
				</div>
			</div>
			<div id='content' class='note-content'>
				{{{ content }}}
			</div>
			{{else}}
			<div>
				{{#if ispinned}}
					<div class="icon-header-note icon-pinned fixed-header-icon" title="{{t "quicknotes" "Unpin note"}}"></div>
				{{else}}
					<div class="icon-header-note icon-pin hide-header-icon" title="{{t "quicknotes" "Pin note"}}"></div>
				{{/if}}
				<div class="icon-header-note icon-delete hide-header-icon icon-delete-note" title="{{t "quicknotes" "Delete note"}}"></div>
				<!--
				{{#if sharedwith}}
				<div class='icon-share shared-title-owner' title="Shared with {{ sharedwith }}"></div>
				{{/if}}
				-->
				<div class='note-title'>
					{{{ title }}}
				</div>
			</div>
			<div class='note-content'>
				{{{ content }}}
			</div>
			<div class='note-tags'>
				{{#each tags}}
					<div class='icon-tag slim-tag' tag-id="{{ id }}">
						{{{ name }}}
					</div>
				{{/each}}
			</div>
			{{/if}}
		</div>
	</div>
	{{/each}}
</div>
<div id="modal-note-div" class="hide-modal-note modal-note-background">
	<div class="modal-content">
		<div class="quicknote note-active" style="background-color: #F7EB96" data-id="-1">
			<div>
				<div class="icon-header-note icon-pin fixed-header-icon" title="{{t "quicknotes" "Pin note"}}"></div>
				<div contenteditable="true" id='title-editable' class='note-title'></div>
			</div>
			<div contenteditable="true" id='content-editable' class='note-content'></div>
			<div class='note-tags'></div>
			<div class="note-options">
				<!--
				<select class="note-share-select" name="users[]" multiple="multiple"></select>
				-->
				<div class="note-toolbar">
					<a href="#" class="circle-toolbar" style="background-color: #F7EB96"></a>
					<a href="#" class="circle-toolbar" style="background-color: #88B7E3"></a>
					<a href="#" class="circle-toolbar" style="background-color: #C1ECB0"></a>
					<a href="#" class="circle-toolbar" style="background-color: #BFA6E9"></a>
					<a href="#" class="circle-toolbar" style="background-color: #DAF188"></a>
					<a href="#" class="circle-toolbar" style="background-color: #FF96AC"></a>
					<a href="#" class="circle-toolbar" style="background-color: #FCF66F"></a>
					<a href="#" class="circle-toolbar" style="background-color: #F2F1EF"></a>
					<a href="#" class="circle-toolbar" style="background-color: #C1D756"></a>
					<a href="#" class="circle-toolbar" style="background-color: #CECECE"></a>
				</div>
				<div class="save-button">
					<!--
					<button id='share-button'><?php p($l->t('Share'));?></button>
					-->
					<button id='tag-button'>
						{{ tagTxt }}
					</button>
					<button id='cancel-button'>
						{{ cancelTxt }}
					</button>
					<button id='save-button'>
						{{ saveTxt }}
					</button>
					</div>
						<div style="clear: both;"></div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
{{else if loaded}}
<div class="emptycontent">
	<div class="icon-quicknotes svg"></div>
	<h2>
		{{ emptyMsg }}
	</h2>
</div>
{{else}}
<div class="emptycontent">
	<div class="icon-quicknotes svg"></div>
	<h2>
		{{loadingMsg}}
	</h2>
	<img class="loadingimport" src="{{loadingIcon}}"/>
</div>
{{/if}}