{% extends "courses/base-course.html" %}
{% load i18n %}

{% block view-name %}view-course-home view-dashboard{% endblock view-name %}

{% block lens_navigation %}
  {#  This is a simplified version of lens-navigation.html. #}

  {#  Translators: Application here refers to the web site/application being used (e.g. the dashboard). #}
  <nav class="navbar navbar-default lens-nav" role="navigation" aria-label="{% trans "Application" %}">
    <div class="container ">
      <ul class="nav navbar-nav">
        <li class="active nav-section">
          <a href="#"><span class="link-label">{% trans "Course Home" %}</span></a>
          <span class="sr-only">({% trans "Active" %})</span>
        </li>

        {% for item in primary_nav_items %}
          <li>
            <a href="{{ item.href }}"><span class="link-label">
                {% if item.icon %}<i class="ico fa {{ item.icon }}" aria-hidden="true"></i>{% endif %}
              {{ item.label }}
            </span></a>
          </li>
        {% endfor %}
      </ul>
    </div>
  </nav>
{% endblock %}

{% block child_content %}
  <div class="row course-home-table-outer">
    {% for column in table_items %}
      <div class="col-sm-4">
        <header class="heading-outer">
          <div class="heading">{{ column.heading }}</div>
        </header>

        <div class="course-home-table">
          <div class="item name">
            <i class="ico fa {{ column.icon }}" aria-hidden="true"></i> {{ column.name }}
          </div>

          {% for item in column.items %}
            <div class="item">
              <div class="title"><a href="{% url item.view course_id=course_id %}">{{ item.title }}</a></div>
              <div class="breadcrumbs">
                <i class="ico fa {{ column.icon }}" aria-hidden="true"></i>
                <i class="ico fa fa-caret-right" aria-hidden="true"></i>
                {% for breadcrumb in item.breadcrumbs %}
                  {{ breadcrumb }}
                  {% if not forloop.last %}
                    <i class="ico fa fa-caret-right" aria-hidden="true"></i>
                  {% endif %}
                {% endfor %}
              </div>
            </div>
          {% endfor %}
        </div>
      </div>
    {% endfor %}
  </div>

  {% if course_overview or external_course_tools %}
    <div class="row">
      <div class="col-sm-12"><hr></div>
    </div>

    <div class="row">
      <div class="col-sm-8">
        {% if course_overview %}
          <h4 class="section-title">{% trans "Basic Course Information" %}</h4>
          <table class="table course-overview" role="presentation">
            <tbody>
              {% for label, value in course_overview %}
                <tr><th>{{label}}</th><td>{{value|safe}}</td></tr>
              {% endfor %}
            </tbody>
          </table>
        {% endif %}
      </div>
      {% if external_course_tools %}
        <div class="col-sm-4">
          {# Translators: This title describes a list of links to outside tools for this course. #}
          <h4 class="section-title">{% trans "External Tools" %}</h4>  
          <ul class="course-external-tools">
            {% for tool in external_course_tools %}
              <li><a href="{{tool.url}}"><i class="ico fa {{tool.icon}}" aria-hidden="true"></i>{{tool.title}}</a></li>
            {% endfor %}
          </ul>
        </div>
      {% endif %}
    </div>
  {% endif %}
{% endblock %}