{{- $folders := .FoldersWithSelection}}
{{- $folder := $folders.Selected -}}
{{- $filter := .FilteredByFollowing -}}

{{- $folderID := $folder.FolderID.Hex -}}
{{- $followingID := .QueryParam "origin.followingId" -}}

<div class="page app flex-row" hx-get="{{.URL}}" hx-trigger="refreshPage from:window" script="on load take .selected from .nav-item for #nav-inbox">

	<link rel="stylesheet" href="/.templates/user-inbox/stylesheet">

	<!-- Sidebar Content -->
	{{- template "sidebar" $folders -}}

	<!-- Main App Content -->
	<div class="app-content">

		<div class="pos-sticky flex-row" style="padding:8px 0px; top:56px; width:100%; background-color:var(--page-background);z-index:100;">

			{{- if $filter.NotZero -}}
				{{- $following := .FollowingByToken $followingID -}}
				<div class="flex-grow-1 margin-top-sm">
					<div class="bold"><a href="/@me/inbox?folderId={{$folderID}}" hx-get="/@me/inbox?folderId={{$folderID}}">{{icon $folder.Icon}} {{$folder.Label}}</a></div>
					<div class="flex-row margin-vertical">
						{{- if ne "" $following.IconURL -}}
							<div class="margin-top-xs">
								<img src="{{$following.IconURL}}" class="circle width-48">
							</div>
						{{- end -}}

						<div>
							<h1 class="margin-top-none margin-bottom-sm ellipsis-block">
								{{$following.Label}}
							</h1>
							<div class="margin-none">
								<a href="{{$following.URL}}" target="_blank" class="text-gray">{{$following.URL}}</a>
								&middot; {{$following.LastPolled | tinyDate}} ago
								&nbsp;
								<button class="text-xs" hx-get="/@me/inbox/following-edit?followingId={{$following.FollowingID.Hex}}">Edit Source</button>
							</div>
						</div>
					</div>
				</div>
			{{- else -}}
				<h1 class="margin-top-sm flex-grow-1">{{icon $folder.Icon}} {{$folder.Label}}</h1>
			{{- end -}}
		</div>

		<div class="text-sm nowrap margin-top-sm pos-absolute" style="top:8px; right:8px; z-index:1000;">
			<button hx-get="/@me/inbox/following-search?folderId={{$folderID}}" class="primary turboclick">{{icon "add"}} Follow</button>
			{{- if $filter.IsZero -}}
				<button hx-get="/@me/inbox/filter?folderId={{$folderID}}" class="turboclick">{{icon "filter"}} Filter</button>
			{{- else -}}
				<button hx-get="/@me/inbox/filter?folderId={{$folderID}}&followingId={{$followingID}}" class="selected ellipsis turboclick" style="max-width:160px;">{{icon "filter-fill"}} {{$filter.Label}}</button>
			{{- end -}}
			<button hx-get="/@me/inbox/folder-edit?folderId={{$folderID}}" class="turboclick">{{icon "settings"}} Folder Settings</button>
		</div>

		{{- template "list" . -}}
	
	</div>

	<script src="/.templates/user-inbox/hyperscript" type="text/hyperscript"></script>

</div>