{% extends 'professor_dashboard.html' %}
{% block body %}
<style>
    .card-folders .card-body > .breadcrumb {
	margin-left: -1.25em;
	margin-right: -1.25em;
	margin-top: -1.25em;
	border-radius: 0;
}

.folder-container {
	text-align: center;
	margin-left: 1rem;
	margin-right: 1rem;
	margin-bottom: 1.5rem;
	width: 100px;
	padding: 0;
	align-self: start;
	background: none;
	border: none;
	outline-color: transparent !important;
	cursor: pointer;
}

.folder-icon {
	font-size: 3em;
	line-height: 1.25em;
}

.folder-icon-color {
	color: #FFC107;
	text-shadow: 1px 1px 0px #e0a800;
}

.folder-name {
	overflow-wrap: break-word;
	word-wrap: break-word;
	hyphens: auto;
}

.flex-column .folder-container {
	display: flex;
	width: auto;
	min-width: 100px;
	text-align: left;
	margin: 0;
	margin-bottom: 1rem;
}

.flex-column .folder-icon, .flex-column .folder-name {
	display: inline-flex;
}

.flex-column .folder-icon {
	font-size: 1.4em;
	margin-right: 1rem;
}

.file-icon-color {
	color: #999;
}
</style>
<script>
$( document ).ready(function() {
  $('#btn-list').on('click', function() {
    $('#main-folders').addClass('flex-column');
    $('#btn-grid').removeClass('active')
    $(this).addClass('active')
  });
  $('#btn-grid').on('click', function() {
    $('#main-folders').removeClass('flex-column');
    $('#btn-list').removeClass('active')
    $(this).addClass('active')
  });
  $('#btn-list').on('click', function() {
    $('#main-files').addClass('flex-column');
    $('#btn-grid').removeClass('active')
    $(this).addClass('active')
  });
  $('#btn-grid').on('click', function() {
    $('#main-files').removeClass('flex-column');
    $('#btn-list').removeClass('active')
    $(this).addClass('active')
  });
});
</script>
<div class="container">
  <div class="card card-folders">
    {% if callresults is not none %}
    <div class="card-header">
      <div class="row align-items-center">
          <div class="col mr-auto">
            {% for res in callresults %}
            <h4 class="card-title m-0">Student Folders of {{res['test_id']}}</h4>
            {% endfor %}
          </div>
          <div class="col col-auto pr-2">
            <div class="btn-group">
              <button class="btn btn-sm btn-outline-secondary" id="btn-list"><i class="fa fa-th-list fa-lg"></i></button>
              <button class="btn btn-sm btn-outline-secondary outline-none active" id="btn-grid"><i class="fa fa-th-large fa-lg"></i></button>
            </div>
          </div>
        </div>
    </div>
    <div class="card-body" id="foldersGroup">
      <div id="main-folders" class="d-flex align-items-stretch flex-wrap">
{% for res in callresults%}
        <div class="d-inline-flex">
            <button class="folder-container">
                <span>
                <a href="studentmonitoringstats/{{res['test_id']}}/{{res['email']}}">
              <div class="folder-icon">
                <i class="fa fa-folder folder-icon-color"></i>
              </div>
              <div class="folder-name">{{res['email']}}<br>
              </div>
            </a>
        </span>
            </button>
          </div>
{% endfor %}
        </div>
    </div>
    {% else %}
    <div class="col-lg-12 col-sm-16">
      <center><lottie-player src="https://assets7.lottiefiles.com/datafiles/vhvOcuUkH41HdrL/data.json"  background="transparent"  speed="1"  style="width: 300px; height: 300px;"  loop  autoplay></lottie-player></center>
        <h3 class="h3 text-center">
            No Records Found!
        </h3>  
        <br>
      </div>
    {% endif %}
  </div>
</div>
{% endblock %}