{{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="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">
                <span class="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="card">
    <div class="m-4">
        <ul class="list-group">
            {{ range .Users }}
            <li class="list-group-item userLine" id="{{ .ID }}">
                <div class="row">
                    <div class="col-sm-2 d-none d-sm-block">
                        <div class="d-flex project-small-thumbnail">
                            <img src="/static/img/placeholder.png" alt="project logo">
                            <div class="project-thumbnail-background"></div>
                            <div class="project-thumbnail-content"></div>
                            <div id="project-thumbnail-letter">U</div>
                        </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">{{ .AccountName }}</span>
                            <h4 class="card-title">{{ .DisplayName }}</h4>
                            <p class="card-text font-italic">{{ .EMail }}</p>
                        </div>
                    </div>
                </div>
            </li>
            {{else}}
            <!-- Placeholder -->
            <p class="text-center empty-group-list">
                <span>This list contains all visible users. Currently, there are no users.</span><br/><br/>
            </p>
            {{end}}
        </ul>
    </div>
</div>
<script type='text/javascript'>
    $(".groupLine").click(function(event){useGroupLink(event)});

    jQuery(document).ready(function($) {
        $("#menuExploreUsers").addClass("disabled active");
        $("#navbarExploreUsers").addClass("disabled active");
    });
</script>
{{end}}


