{% macro livelabel(live=None, nowlive=None) %}
{% if live or nowlive %}
<span class="label {% if nowlive %}label-danger{% else %}label-default{% endif %}">Live</span>
{% endif %}
{% endmacro %}

{% macro preview(lecture) %}
<li class="list-group-item">
	<a href="{{url_for('lecture', course=lecture.course.handle, id=lecture['id'])}}" title="{{ lecture.course.title }}" style="color: #000">
		<div class="hidden-xs">
			<div class="row">
				<img class="col-xs-4" style="max-height: 120px; height: auto; width:170px" src="{{ config.VIDEOPREFIX }}/thumbnail/l_{{ lecture['id'] }}.jpg" alt="Vorschaubild">
				<div class="col-xs-4">
					<span><strong>{{ lecture.course.short }}</strong> {{livelabel(0, lecture.livehandle)}}{% if ismod() %} <i>({{lecture.course_id}})</i>{% endif %}</span><br>
					<span>{% if ismod() %}ID: {{lecture.id}}{% endif %}</span><br>
					<span>{{ lecture['time']|fulldate }}</span>
					{% if lecture['speaker'] %}
						<div class="small">Gehalten von {{ lecture['speaker']|safe }} </div>
					{% endif %}
				</div>
				<div class="col-xs-4">
					<div>{{ lecture['title']|fixnl|safe }}</div>
				</div>
			</div>
		</div>
		<div class="visible-xs">
			<ul class="list-unstyled">
				<li>
					<img style="width: 100%;" src="{{ config.VIDEOPREFIX }}/thumbnail/l_{{ lecture['id'] }}.jpg" alt="Vorschaubild">
				</li>
				<li>
					<strong>{{ lecture.course.title }}</strong>
					{{livelabel(0, lecture.livehandle)}}
				</li>
				<li>{{ lecture['time']|fulldate }}</li>
				{% if lecture['speaker'] %}
				<li>
					<span class="small">Gehalten von {{ lecture['speaker']|safe }} </span>
				</li>
				{% endif %}
				<li>
					{{ lecture['title']|fixnl|safe }}
				</li>
			</ul>
		</div>
	</a>
</li>

{% endmacro %}

{% macro player(lecture, videos, msgs=[], autoplay=True, seek=None) %}
{% if seek == None %}
	{% set mfrag = "" %}
{% else %}
	{% set mfrag = "#t="+seek %}
{% endif %}
<video id="videoplayer" style="width: 100%" class="video-js vjs-default-skin vjs-big-play-centered" width="640" height="320" controls data-wasnotplayed="1" data-setup='{ "language":"de", "plugins" : {"hotkeys": {"seekStep": 15, "enableVolumeScroll": false, "alwaysCaptureHotkeys": true}, "videoJsResolutionSwitcher": { "ui": true, "default": "720p", "dynamicLabel": false } }, "customControlsOnMobile": true, "playbackRates": [0.5, 0.75, 1, 1.25, 1.5, 1.75, 2, 2.25, 2.5, 2.75, 3, 3.25, 3.5, 3.75, 4] }'>
	{% for v in videos|sort(attribute='formats.player_prio', reverse=True) %}
	<source type="{{ v.formats.mimetype }}" src="{{ config.VIDEOPREFIX }}/{{ v.path }}{{mfrag}}" data-label="{{ v.formats.description }}" data-res="{{v.formats.resolution}}" data-aspect="{{v.formats.aspect}}" data-player_prio="{{v.formats.player_prio}}"/>
	{% endfor %}
	<track srclang="de" kind="chapters" src="{{ url_for('chapters',lectureid=lecture.id) }}" />
</video>
<script>
$(function() {
	$('#videoplayer').addClass("vjs-fluid");
	$('#videoplayer').css("width");
	videojs("videoplayer").ready(function() {
		//resume
		var progress_key = "progress_{{ lecture.id }}";
		var seconds_played;
		if (localStorage) {
			seconds_played = localStorage.getItem(progress_key);
			if (!seconds_played) {
				seconds_played = 0;
			} else {
			{% if seek == None %}
				videojs('videoplayer').currentTime(seconds_played);
			{% endif %}
			}
		}
		videojs("videoplayer").on("timeupdate", function() {
			if (localStorage) {
				var player_cur_Time = Math.round(videojs("videoplayer").currentTime());
				if(Math.abs(player_cur_Time - seconds_played) >= 10) {
					seconds_played = player_cur_Time;
					localStorage.setItem( progress_key , seconds_played)
				}
			}

		});

		//autoplay
		var playerplay = function() {
			if ($('#videoplayer').data("wasnotplayed") == 1) {
				videojs('videoplayer').play();
				$('#videoplayer').data("wasnotplayed","0");
			}
		};
		{% if autoplay %}
		$(window).focus(playerplay);
		if (document.hasFocus()) {
			playerplay();
		}
		{% endif %}
		// errors as modal dialog
		videojs("videoplayer").on("error", function() {
			var modals = [];
			//display errors
			{% for msg in msgs %}
				var m = videojs("videoplayer").createModal('',{"uncloseable": true });
				modals.push(m);
				m.contentEl().innerHTML='<div class="hidden-print alert alert-danger" role="alert">{{ msg|safe }}</div>';
				
			{% endfor %}
			videojs("videoplayer").on('play', function() {
				for (var i=0; i < modals.length; i++) {
					//modals[i].close();
				}
			});
		});
		//markers
		$.ajax({method: "GET", url: "{{url_for('chapters',lectureid=lecture.id, json=1)}}", dataType: "json",
			success: function (data) {
				videojs("videoplayer").markers({
					markerStyle: {
						'width':'5px',
						'border-radius': '40%',
						'background-color': 'black'
					},
					markerTip:{
						display: true,
						text: function(marker) {
							return marker.text;
						}
					},
					markers: data});
			}});

	});
});
</script>
{% endmacro %}

{% macro course_list_item(course,show_semester=False) %}
<li class="list-group-item list-group-item-condensed {% if (not course.visible) or (not course.listed) %}list-group-item-danger{% endif %}">
	<div class="row">
			{% if show_semester %}
				<span class="col-xs-2 col-md-1">
					{{ course.semester|semester }}
				</span>
				<span class="col-xs-10 col-md-6">
			{% else %}
				<span class="col-xs-12 col-md-7">
			{% endif %}
				<a href="{{url_for('course', handle=course.handle)}}">
					{{ course.title }}{% if ismod() %}<i> ({{course.id}})</i>{% endif %}
				</a>
				{% if course.chapter_count|d(0) > 0 and ismod() %}
					<span class="label label-info" data-toggle="tooltip" title="Nicht freigegebene Kapitel">{{ course.chapter_count }}</span>
				{% endif %}
			</span>
			<span class="col-xs-8 col-md-3">
				{{ course.organizer }}
			</span>
			<span class="col-xs-4 col-md-2">
				{{ course.subject }}
			</span>
	</div>
</li>
{% endmacro %}

{% macro video_download_btn(videos) %}
{% if not ismod() %}
<button class="btn btn-default dropdown-toggle{% if not videos|selectattr('downloadable')|list and not ismod() %} disabled{% endif %}" type="button" data-toggle="dropdown">Download <span class="caret"></span></button>
<ul class="dropdown-menu">
	{% for v in videos|sort(attribute='formats.prio', reverse=True) if (v.downloadable or ismod() ) %}
	<li><a href="{{ config.VIDEOPREFIX }}/{{v.path}}">{{v.formats.description}} ({{v.file_size|filesizeformat(true)}})</a></li>
	{% endfor %}
</ul>
{% endif %}
{% if not ismod() %}
	<noscript> 
{% endif %}
<ul class="pull-right list-unstyled" style="margin-left:10px;">
{% for v in videos|sort(attribute='formats.prio', reverse=True) if (v.downloadable or ismod() ) %}
	<li>{{moderator_delete(['videos',v.id,'deleted'])}} {{ moderator_checkbox(['videos',v.id,'visible'], v.visible) }} <a href="{{ config.VIDEOPREFIX }}/{{v.path}}">{{v.formats.description}} ({{v.file_size|filesizeformat(true)}})</a></li>
{% endfor %}
</ul>
{% if not ismod() %}
	</noscript> 
{% endif %}
{% endmacro %}

{%macro video_embed_btn(lectureid, course=None) %}
<a class="btn btn-default" id="embedcodebtn" data-container="body" data-toggle="popover" data-placement="bottom">
	<span>Einbetten</span>
</a>
<script>
{% set embedcode = '<iframe width="700" height="394" src="'+url_for('embed', course=course, id=lectureid, _external=True)+'" frameborder="0" allowfullscreen="true"></iframe>' %}
$('#embedcodebtn').popover(
		{
			html:true,
			title:'Einbettcode',
			content:'<span><input type="text" onclick="this.select()" value="{{embedcode}}"></span>'
		}
		)
</script>
{% endmacro %}

{% macro lecture_list_item(lecture,videos,global_permissions,chapters=[]) %}
<li class="list-group-item{% if lecture.norecording %} text-muted{% endif %}" id="lecture-{{lecture.id}}">
	<div class="row">
		{% if ismod() or (videos|length > 0) %}
			<div style="background-image: url('{{ config.VIDEOPREFIX }}/thumbnail/l_{{lecture.id}}.jpg')" class="col-sm-2 col-xs-12 thumbnailimg">
			{% if (not videos|length is equalto 0) or ismod() %}
				<a href="{{url_for('lecture', course=lecture.course.handle, id=lecture.id)}}">
					<span class="glyphicon glyphicon-play-circle playpreviewbtn"></span>
				</a>
			{% endif %}
			</div>
			<ul class="list-unstyled col-sm-3 col-xs-12">
				<li>
					{{ moderator_editor(['lectures',lecture.id,'title'], lecture.title) }}
					{{ livelabel((lecture.live and lecture.time > datetime.now()-timedelta(days=1)), videos|selectattr("livehandle")|list|length) }}
					{% if lecture.chapter_count|d(0) > 0 and ismod() %}
						<span class="label label-info" data-toggle="tooltip" title="Nicht freigegebene Kapitel">{{ lecture.chapter_count }}</span>
					{% endif %}
				</li>
				{% if lecture.speaker or ismod() %}<li>Gehalten von {{ moderator_editor(['lectures',lecture.id,'speaker'], lecture.speaker) }}</li>{% endif %}
				{% if ismod() %}
				<li>{{ moderator_editor(['lectures',lecture.id,'time'], lecture.time) }} </li>
				<li>Dauer: {{ moderator_editor(['lectures',lecture.id,'duration'], lecture.duration) }} min</li>
				<li>ID: <a href="{{url_for('course',handle=lecture.course.handle)}}#lecture-{{lecture.id}}">{{lecture.id}}</a></li>
				{% else %}
				<li>{{ lecture.time|fulldate }}</li>
				{% endif %}
			</ul>
			<ul class="list-unstyled col-sm-3 col-xs-12">
				<li>{{ moderator_editor(['lectures',lecture.id,'comment'], lecture.comment) }}</li>
				{% for chapter in chapters %}
				<li><span class="glyphicon glyphicon-play"></span> <a href="{{url_for('lecture', course=lecture.course.handle, id=lecture.id, t=chapter.time)}}">{{chapter.text}}</a></li>
				{% endfor %}
				{% if ismod() %}
				<li>{{ moderator_editor(['lectures',lecture.id,'internal'], lecture.internal) }}</li>
				<li>Sichtbar: {{ moderator_checkbox(['lectures',lecture.id,'visible'], lecture.visible) }}</li>
				<li>Livestream geplant: {{ moderator_checkbox(['lectures',lecture.id,'live'], lecture.live) }}</li>
				<li>Wird nicht aufgenommen: {{ moderator_checkbox(['lectures',lecture.id,'norecording'], lecture.norecording) }}</li>
				<li>Hörsaal: {{ moderator_editor(['lectures',lecture.id,'place'], lecture.place) }} </li>
				{% endif %}
			</ul>
			<ul class="col-sm-4 col-xs-12 list-unstyled">
				<li>
					<ul class="list-inline">
						<li class="dropdown">
							{{ video_download_btn(videos) }}
						</li>
						<li class="pull-right">
							{{ moderator_permissioneditor('lecture', lecture.id, lecture.perm, global_permissions) }}
						</li>
						<li class="pull-right">
							{{ moderator_delete(['lectures',lecture.id,'deleted']) }}
						</li>
						{% if ismod() %}
						<li class="pull-right">
							<button class="btn btn-{{ 'default' if not lecture.stream_settings else 'danger' if lecture.stream_job else 'primary' }}" data-toggle="modal" data-target="#editstream" data-lectureid="{{ lecture.id }}" data-active="{{ 1 if lecture.stream_job else '' }}" data-path="{{ 'lectures.%i.stream_settings'%lecture.id }}" data-value='{{ lecture.stream_settings|e }}'>
								<span class="fas fa-broadcast-tower"></span>
							</button>
						</li>
						{% endif %}
					</ul>
				</li>
				{% if ismod() %}
				<li class="pull-right">
					<p>Abrufe: <span data-lectureid="{{ lecture.id }}" data-lecturedate="{{ lecture.time }}" class="viewcounter">loading...</span></p>
				</li>
				{% endif %}
			</ul>
		{% else %}
			<div class="col-sm-2 col-xs-12">
			</div>
			<ul class="list-unstyled col-sm-3 col-xs-12">
				<li>
					{{ moderator_editor(['lectures',lecture.id,'title'], lecture.title) }}
					{{livelabel((lecture.live and lecture.time > datetime.now()-timedelta(days=1)), videos|selectattr("livehandle")|list|length)}}
					{% if lecture.chapter_count|d(0) > 0 and ismod() %}
						<span class="label label-info" data-toggle="tooltip" title="Nicht freigegebene Kapitel">{{ lecture.chapter_count }}</span>
					{% endif %}
				</li>
			</ul>
			<ul class="list-unstyled col-sm-3 col-xs-12">
				{% if ismod() %}
				<li>{{ moderator_editor(['lectures',lecture.id,'time'], lecture.time) }} </li>
				{% else %}
				<li>{{ lecture.time|fulldate }}</li>
				{% endif %}
			</ul>
			<ul class="list-inline col-sm-4 col-xs-12">
				<li>{{ moderator_editor(['lectures',lecture.id,'comment'], lecture.comment) }}</li>
			</ul>
		{% endif %}
	</div>
</li>
{% endmacro %}

{% macro moderator_editor (path,value,reload=false) %}
	{% if ismod() %}
	<span class="moderator_editor" data-path="{{path|join('.')}}" data-reload="{{ reload|int }}" >
		<a class="moderator_editor_sign btn btn-default" title="{{path|join('.')}}{{ path|join('.')|getfielddescription }}{% for l in  path|join('.')|getfieldchangelog %}<br>{% if (l.who != l.who|string) %}{{ l.name }} ({{ l.who }}){% else %}{{ l.who }}{%endif%} <{{ l.when }}>: {{ l.value_new|truncate(60, killwords=True)|forceescape|forceescape }}{% endfor %}" data-toggle="tooltip" tabindex="0" style="padding: 3px; margin-right: 5px;">
			<span class="glyphicon glyphicon-pencil"></span>
		</a>
		<span class="moderator_editor_value">{{ value|fixnl|safe }}</span>
	</span>
	{% else %}
		{{value|fixnl|safe}}
	{% endif %}
{% endmacro %}

{% macro moderator_checkbox (path,value) %}
	{% if ismod() %}
	<input title="{{path|join('.')}}{{ path|join('.')|getfielddescription }}{% for l in  path|join('.')|getfieldchangelog %}<br>{% if (l.who != l.who|string) %}{{ l.name }} ({{ l.who }}){% else %}{{ l.who }}{%endif%} <{{ l.when }}>: {{ l.value_new|truncate(60, killwords=True)|forceescape|forceescape }}{% endfor %}" data-toggle="tooltip" type="checkbox" data-path="{{path|join('.')}}" {% if value %} checked {% endif %} onchange="moderator.editor.changeboxclick(this)"/>
	{% endif %}
{% endmacro %}

{% macro moderator_delete (path) %}
	{% if ismod() %}
	<button class="btn btn-default" style="background-color: red;" data-path="{{path|join('.')}}" onclick="moderator.editor.deletebtnclick(this)" >
		<span class="glyphicon glyphicon-trash"></span>
	</button>
	{% endif %}
{% endmacro %}

{% macro moderator_permissioneditor(type,id,perm,global_permissions) %}
	{% set tmp = global_permissions.extend(perm) %}
	{% set permdescription = perm|permdescr %}
	{% set permlogos = '' %}

	{% if permdescription[0] == 'public' %}
		{% set permlogos = '<span class="fa fa-globe-asia" aria-hidden="true"></span>' %}
	{% endif %}
	{% if permdescription[0] == 'none' %}
		{% set permlogos = '<span class="fa fa-ban" aria-hidden="true"></span>' %}
	{% endif %}
	{% if permdescription[0] == 'password' %}
		{% set permlogos = '<span class="fa fa-lock" aria-hidden="true"></span>' %}
	{% endif %}
	{% if permdescription[0] == 'l2p' %}
		{% set permlogos = '<span class="fa" aria-hidden="true" style="width: 12px; height: 14px; background-size: cover; background-image: url(\'/static/l2p-logo.gif\');"></span>' %}
	{% endif %}
	{% if permdescription[0] == 'rwth' %}
		{% set permlogos = '<span class="fa" aria-hidden="true" style="width: 25px; height: 20px; background-size: cover; background-image: url(\'/static/rwth.png\');"></span>' %}
	{% endif %}
	{% if permdescription[0] == 'fsmpi' %}
		{% set permlogos = '<span class="fa" aria-hidden="true" style="width: 25px; height: 20px; background-size: cover; background-image: url(\'/static/fsmpi.png\');"></span>' %}
	{% endif %}

	{% if ismod() %}
		<button class="btn btn-default" data-toggle="modal" data-target="#editperm" data-type="{{ type }}" data-id="{{ id }}">
			{{ permlogos|safe }}
		</button>
	{% else %}
		<span title="{{permdescription[1]}}">
			{{ permlogos|safe }}
		</span>
	{% endif %}
	
{% endmacro %}

{% macro vtttime(time) %}{{ time|time_offset }}.000{% endmacro %}

{% macro stats_viewsperday(id, req, title, type="scatter", param=None, maxtraces=7) %}
<script>
	$.ajax({
		method: "GET",
		url: "{{url_for('stats_viewsperday', req=req, param=param)}}",
		dataType: "json",
		error: moderator.api.handleapierror,
		success: function (data) {
			var traces = [];
			for (var i = 0; i < data.views.length; i++) {
				if (data.views[i].name == 'total' && data.views.length > 2)
					traces.push({"x": data.times, "y": data.views[i].vals, "type": "{{type}}", "name": "gesamt", line: {"color": "black", "width": 2}});
				else
					traces.push({"x": data.times, "y": data.views[i].vals, "type": "{{type}}", "name": data.views[i].name, line: {"width": 1}});
			}
			traces.sort(function (a, b) {
				amax = 0;
				bmax = 0;
				for (var i = 0; i < a.y.length; i++)
					amax = Math.max(amax, a.y[i]);
				for (var i = 0; i < b.y.length; i++)
					bmax = Math.max(bmax, b.y[i]);
				return bmax-amax;
			});
			for (var i = 0; i < traces.length; i++)
				if (i > {{maxtraces}})
					traces[i].visible = "legendonly";
			var layout = {
				"title": "{{title}}",
				"showlegend": (traces.length != 1)
			};
			Plotly.newPlot("{{id}}", traces, layout, { "modeBarButtonsToRemove": ['sendDataToCloud','hoverCompareCartesian'], "displaylogo": false});
		}
	});
</script>
{% endmacro %}

{% macro featured_content(item) %} {# This macro is used in a panel div after the panel header #}
	{% if item.type == 'image' %}
		<!-- Putting image tag here makes it borderless. This should be replaced by a bootstrap-compatible solution. -->
		<img src="{{item.param}}" style="width: 100%;"/>
		{% if ismod() %}
		<p>{{moderator_editor(('featured',item.id,'param'), item.param)}}</p>
		{% endif %}
		{% if item.text or ismod() %}
			<div class="panel-body">{{ moderator_editor(('featured',item.id,'text'), item.text) }}</div>
		{% endif %}
	{% elif item.type == 'courses' %}
		{% if item.text or ismod() %}
			<div class="panel-body">{{ moderator_editor(('featured',item.id,'text'), item.text) }}</div>
		{% endif %}
		<ul class="courses-list list-group">
		{% for i in item.courses %}
			{{ course_list_item(i) }}
		{% endfor %}
		</ul>
		<div class="panel-footer">
		{% if ismod() %}
			<ul class="list-inline">	
			<li><div class="dropdown">
				{% set params = {'semester': 'Semester', 'title': 'Veranstaltung', 'organizer': 'Dozent', 'subject': 'Kategorie'} %}
				<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">{{params[item.param]}}: <span class="caret"></span></button>
				<ul class="dropdown-menu">
					{% for key, name in params.items() %}
					<li><a href="{{url_for('edit', **{'featured.'+item.id|string+'.param': key, 'ref': request.url})}}">{{name}}</a></li>
					{% endfor %}
				</ul>
			</div></li>
			<li>{{ moderator_editor(('featured',item.id,'param2'), item.param2, reload=True) }}</li>
			</ul>
		{% endif %}
		Die vollständige Liste findest du <a href="{{ url_for('courses') }}">hier</a>.
		</div>
	{% elif item.type == 'video' %}
		<div class="panel-body">
			<div>{{ moderator_editor(('featured',item.id,'text'), item.text) }}</div>
			{% if item.videos %}
			{{ player(item.lecture, item.videos, autoplay=False)}}
			{% endif %}
			{% if ismod() %}
			<div>ID des Videos: {{ moderator_editor(('featured',item.id,'param'), item.param, reload=True) }}</div>
			{% endif %}
			<div>{{ moderator_editor(('featured',item.id,'param2'), item.param2) }}</div>
		</div>
	{% else %}
		{% if item.text or ismod() %}
			<div class="panel-body">{{ moderator_editor(('featured',item.id,'text'), item.text) }}</div>
		{% endif %}
	{% endif %}
{% endmacro %}