{{/*
This file is part of SystemTestPortal.
Copyright (C) 2017  Institute of Software Technology, University of Stuttgart

SystemTestPortal is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.

SystemTestPortal is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU General Public License for more details.

You should have received a copy of the GNU General Public License
along with SystemTestPortal.  If not, see <http://www.gnu.org/licenses/>.
*/}}

{{define "content"}}
<div class="row searchbar">
	<div class="col-12">
		<form role="search" class="search-form">
			<label class="sr-only">Search</label>
			<div class="input-group flex-nowrap">
				<input type="search" name="s" class="order-1 search-field form-control float-left" placeholder="Search..."  data-toggle="tooltip" data-placement="bottom"
					   title="" data-original-title="This feature will be available in a future version">
				{{ if .SignedIn }}
				<a class="order-3 btn btn-primary align-middle ml-4 float-right" href="/{{ .User.ID.Actor }}/projects/new">
					+ <span class="d-none d-sm-inline">New Project</span>
				</a>
				{{ end }}
				<span class="order-2 input-group-btn">
					<button class="search-submit btn btn-outline-success disabled" disabled  data-toggle="tooltip" data-placement="bottom"
							title="" data-original-title="This feature will be available in a future version">
						<i class="fa fa-search" aria-hidden="true"></i>
						<span class="d-none d-sm-inline"> Search</span>
					</button>
				</span>
			</div>
		</form>
	</div>
</div>
<div class="row">
    <div class="col-12">
        {{ if .SignedIn }}
            <p>Show public, internal and your private projects</p>
        {{ else }}
            <p>Show all public projects</p>
        {{ end }}
    </div>
</div>
<div class="card">
	<div class="m-4">
		<ul class="list-group">
			{{ range .Projects }}
			<li class="list-group-item projectLine" id="{{ .Name }}" title="{{ .Owner }}">
				<div class="row">
					<div class="col-sm-2 d-none d-sm-block">
						<div class="d-flex project-small-thumbnail">
							<img src="/{{ .Image }}" alt="project logo">
						</div>
					</div>
					<div class="col-xs-12 col-sm-10">
						<div class="card-block">
							<span class="d-none d-sm-block float-right badge badge-secondary"><span>created </span><time class="timeago" datetime="">{{ .CreationDate }}</time></span>
							<h4 class="card-title">{{ .Owner.Actor }}/{{ .Name }}</h4>
							<p class="card-text font-italic">{{ .Description }}</p>
						</div>
					</div>
				</div>
			</li>
			{{ else }}
			<!-- Placeholder -->
			<p class="text-center empty-project-list">
				<span>This list contains all visible projects. Currently, there are no projects.</span><br/><br/>
			{{ if .SignedIn }}
					<a class="btn btn-primary align-middle" href="/{{ .User.ID.Actor }}/projects/new">
						<span>New Project</span>
					</a>
				{{ end }}
			</p>
			{{ end }}
		</ul>
	</div>
</div>
<script type='text/javascript'>
    $(".projectLine").click(function(event){useProjectLink(event)});

    jQuery(document).ready(function($) {
        $("#menuExploreProjects").addClass("disabled active");
        $("#navbarExploreProjects").addClass("disabled active");
    });

    $('.timeago').each(function(i, obj) {
        var timeString = $(this).text();
        timeString = timeString.replace(" ", 'T');
        timeString = timeString.replace(" ", '');
        timeString = timeString.replace(" CET", '');
        $(this).text(timeString);
        $(this).attr("datetime", timeString);
    });
    jQuery("time.timeago").timeago();
</script>
{{end}}

