{% extends 'backoffice/courses/base-detail.html' %}
{% load url from future %}
{% load i18n course staticfiles %}

{% block extra_head %}
<style>
.button-bar {
  margin-top: 30px;
}
</style>
{% endblock %}


{% block tab_content %}

      <div class="row">
        <div class="col-md-9">

          <div class="course-info">
            <h2> {% trans 'Course information' %} </h2>
            <p>
              <strong>{% trans "Students enrolled in this course: " %}</strong>{{ course_info.students_count }}
            </p>

            {% if mode_count %}
              <strong>{% trans "This course has enrollment modes: " %}</strong>
              <ul>
              {% for mode, count in mode_count.items %}
                <li>{{ mode }}: {{ count }}</li>
              {% endfor %}
              </ul>
            {% endif %}

            <p>
              <strong>{% trans "Roles: " %}</strong>

              {% regroup roles|dictsort:"role" by role as roles_list %}
              <ul>
                {% for role in roles_list %}
                  <li ><strong class='role-name'>{{ role.grouper }}:</strong>
                  <ul>
                      {% for item in role.list %}
                        <li>{% if item.user.get_full_name %}{{ item.user.get_full_name }}{% else %}{{ item.user.username }}{% endif %}
                           - <a href="mailto:{{ item.user.email }}">{{ item.user.email }}</a>
                        </li>
                      {% endfor %}
                  </ul>
                  </li>
                {% endfor %}
              </ul>
            </p>
          </div>

        </div>
        <div class="col-md-3 text-center">
          {% if university %}
            <img src="{{ university.logo.url }}" alt="{{ university.name }}" title="{{ university.name }}" />
            <h4>{{ university.name }}</h4>
          {% else %}
            {% trans "This course does not belong to any university" %}
          {% endif %}
        </div>
      </div>

      <div class="row button-bar">
        <div class="col-md-10">
            <div class="row">
                <a class="btn btn-primary" href="{{ course_info.studio_url }}">{% trans "View Course in Studio" %}</a>
                <a class="btn btn-primary" href="{% url 'backoffice:certificate-dashboard' course_info.course.id %}">{% trans "Certificate Management" %}</a>
                <a class="btn btn-primary" href="{% url 'course-dashboard:home' course_info.course.id %}">{% trans "Dashboard" %}</a>
                <a class="btn btn-primary" href="{% url 'backoffice:ora2-submissions:status' course_info.course.id %}">{% trans "Download ORA2 submissions" %}</a>
            </div>
        </div>
        <div class="col-md-2 text-right">
          <a id="delete-course" class="btn btn-danger" data-toggle="modal" data-target="#delete-course-modal">{% trans "Delete this course" %}</a>
        </div>
      </div>
{% endblock tab_content %}


{% block modal_content %}
<!-- Modal -->
<form action="{% url 'backoffice:course-detail' course_info.course.id %}" method="POST">
<input type="hidden" name="action" value="delete-course">
{% csrf_token %}
<div class="modal fade" id="delete-course-modal" tabindex="-1" role="dialog" aria-labelledby="" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="">{% trans "Delete course" %}</h4>
      </div>
      <div class="modal-body">
        <p>
        {% trans "Please confirm you really want to delete this course:" %}<br>
        <h4>{{ course_info.course.display_name_with_default }}</h4>
          <strong>{{ students_count }} {% trans "Students enrolled" %}</strong>
        </p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">{% trans "Cancel" %}</button>
        <button type="submit" class="btn btn-primary">{% trans "Delete" %}</button>
      </div>
    </div>
  </div>
</div>
</form>
{% endblock modal_content %}