{% extends 'main.html' %}

{% block pid %}id="pauthor_detail"{%endblock%}


{% block content %}
{% include "flash_messages.html" %}
<section class="author-detail-row">
	<header>

		{# Display edit menu only on first page and if user is admin #}
		{% if curpage == 0 and isadmin %}
		<a id="author_edit" href="#popupMenu" data-rel="popup" data-role="button" data-inline="true" data-mini="true" data-icon="edit" data-theme="b" data-iconpos="notext">
			{{page.glob.l10n.edit}}
		</a>
		<div data-role="popup" id="popupMenu" data-theme="d">
		        <ul data-role="listview" data-inset="true" style="min-width:210px;" data-theme="a">
		            <li data-role="divider" data-theme="b">
		            	{{page.glob.l10n.author_metadata}}
		            </li>
		            <li>
		            	<a href="#author-mdthumb-panel">
		            		{{page.glob.l10n.author_thumbnail}}
		            	</a>
		            </li>
		            <li>
		            	<a href="#author-mdlinks-panel">
		            		{{page.glob.l10n.author_links}}
		            	</a>
		            </li>
		        </ul>
		</div>
		{% endif%}

		{# Display available metadata only on first page #}
		{% if curpage == 0 %}
		<div id="author-metadata" class="ui-grid-a ui-responsive">
			<div class="ui-block-a">
				<h3>{{ author.name }}</h3>
				{% if author.thumbnail %}
				<img id="author-thumbnail-pic" src="{{page.rot}}/{{author.thumbnail.url}}"/>
				{% endif %}
			</div>
			<div id="author-links" class="ui-block-b">
				<ul id="author-links-list" data-role="listview" data-inset="true" >
				{% if author.links %}
					{% for link in author.links %}
					<li class="author-link link-{{link.id}}">
						<a data-role="button" data-icon="cloud" rel="external" href="{{link.url}}">{{link.label}}</a>
					</li>
					{% endfor %}
				{% endif %}
				</ul>
				{% if series != NULL %}
				<div id="series" data-role="collapsible">
					<h3>{{page.glob.l10n.series}}</h3>
					<ul id="author-series-list" data-role="listview" data-inset="true" >
						{% for this_series in series %}
						<li class="series-link link-{{link.id}}">
							<a data-role="button" data-icon="info" href="{{page.rot}}/series/{{this_series.id}}/0/">{{ this_series.name }}</a>
						</li>
						{% endfor %}
					</ul>
				</div>
				{% endif %}
			</div>
		</div>
		{% else %}
		<h3>
			{{page.glob.l10n.booksby}} <em>{{ author.name }}</em>
		</h3> 
		{% endif %}
	</header>
	<div id="filler">&nbsp;</div>
	<section id="author-books">
		<ul data-role="listview">
			{% for book in books %}
				{% include "title_entry.html" %}		
			{% endfor %}	
		</ul>
	</section>
</section>
{% endblock %}

{% block rightpanel %}
<section data-role="panel" data-display="overlay" data-position="right" id="author-mdthumb-panel" >
	<h2>{{page.glob.l10n.author_thumbnail}}</h2>
	<div id="flash"></div>
	<p>{{page.glob.l10n.author_thumbnail_expl}}</p>
	<form id="author-pic" action="{{page.rot}}/metadata/authors/{{ author.id }}/thumbnail/" method="post" enctype="multipart/form-data" data-ajax="false">
			<input type="file" name="file" 
				accept="image/jpg,image/jpeg,image/pjpeg,image/png,image/x-png,.jpg,.png,.jpeg" 
				capture required/>
			<input type="submit" value="{{page.glob.l10n.upload}}" data-mini="true" />
	</form>
	<a data-role="button" id="delete-image" href="#" value="delete" data-mini="true" data-proot="{{page.rot}}" data-author="{{ author.id }}">
		{{page.glob.l10n.delete}}
	</a>
</section>

<section data-role="panel" data-display="overlay" data-position="right" id="author-mdlinks-panel" >
	<h2>{{page.glob.l10n.author_links}}</h2>
	<div id="flash"></div>
	<p>{{page.glob.l10n.author_links_expl}}</p>
	<form id="author-link-new" action="{{page.rot}}/metadata/authors/{{ author.id }}/links/">
  		<input type="text" name="link-description" id="link-description" placeholder="{{page.glob.l10n.author_links_text}}" maxlength="50" required />
  		<input type="url" name="link-url" id="link-url" placeholder="{{page.glob.l10n.author_links_url}}" maxlength="255" required />
  		<input type="submit" value="{{page.glob.l10n.save}}" data-mini="true" />
	</form>
	<ul id="author-links-edit" data-role="listview" data-split-icon="delete" data-inset="true">
		{% for link in author.links %}
		<li class="link-{{link.id}}">
			<a href="{{link.url}}">
				{{link.label}}
			</a>
			<a href="#" data-proot="{{page.rot}}" data-author="{{author.id}}" data-link="{{link.id}}" class="author-link-delete">
				{{page.glob.l10n.delete}}
			</a>
		</li>
		{% endfor %}	
	</ul>
</section>

<script id="linkTemplate1" type="text/html">
	<li data-template-bind='[{"attribute": "class", "value": "class1"}]'>
		<a data-template-bind='[
			{"attribute": "href", "value": "url"},
			{"attribute": "content", "value": "label"}
			]'/>
	</li>
</script>
<script id="linkTemplate2" type="text/html">
	<li data-template-bind='[{"attribute": "class", "value": "class2"}]'>
		<a data-template-bind='[
			{"attribute": "href", "value": "url"},
			{"attribute": "content", "value": "label"}
			]'/>
		<a 	href="#" 
			class="author-link-delete" 
			data-proot="{{page.rot}}" 
			data-author="{{author.id}}" 
			data-template-bind='[{"attribute": "data-link", "value": "id"}]' >
			{{page.glob.l10n.delete}}
		</a>
	</li>
</script>

{% endblock%}