{% extends 'course/index.html' %}

{% load static i18n permission_tags custom_filters %}
{% load django_bootstrap_breadcrumbs %}

{% block style %}
  <link rel="stylesheet" href="{% static 'css/course/course.css' %}">
{% endblock style %}

{% block javascript %}
  <script type="text/javascript" src="{% static 'js/course.js' %}"></script>
  <script type="text/javascript" src="{% static 'js/modal_subject.js' %}"></script>
  <script type="text/javascript" src="{% static 'js/topic_editation_presentation.js' %}"></script>
{% endblock %}

{% block breadcrumbs %}

  {{ block.super }}
  {% breadcrumb course 'course:view' course.slug %}

{% endblock %}

{% block content %}

  <div class="col-md-12 cards-content">
    <div class="panel panel-info">
      <div class="panel-heading course-detail">
        <div class="row">
          <div class="col-xs-8 col-md-11 .titleTopic-detail">
            <h4>{{course.name}}</h4>
          </div>
          {% if user|has_role:'professor' or user|has_role:'system_admin' %}
            <div class="col-xs-4 col-md-1" id="divMoreActions">
              <div class="btn-group">
                <button class="btn btn-default btn-sm dropdown-toggle" type="button" id="moreActions" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                  <i class="fa fa-ellipsis-v fa-2x" aria-hidden="true"></i>
                <div class="ripple-container"></div></button>
                <ul class="dropdown-menu pull-right" aria-labelledby="moreActions">
                  <li><a href="{% url 'course:replicate_course' course.slug %}"><i class="fa fa-files-o fa-fw" aria-hidden="true"></i>&nbsp; {% trans "Replicate" %}</a></li>
                  <li><a href="{% url 'course:update' course.slug %}"><i class="fa fa-pencil fa-fw" aria-hidden="true"></i>&nbsp; {% trans "Edit" %}</a></li>
                  <li><a href="javascript:javascript:delete_course('{% url 'course:delete' course.slug %}', '{{ course.slug }}', '{% trans "Are you sure you want to delete this course?" %}', '{% url 'course:manage' %}')" data-toggle="modal" data-target="#myModal2"><i class="fa fa-trash fa-fw" aria-hidden="true"></i>&nbsp; {% trans "Remove" %}</a></li>
                </ul>
              </div>
            </div>
          {% endif %}
      </div>
    </div>
    <div class="panel-body">
      <p><b>{% trans 'Coordinator' %}: </b>{{course.coordenator}}</p>
      <p><b>{% trans 'Teacher' %}: </b>{{course.professors.all.0}}</p>
      <p>
        <b>{% trans 'Description' %}:</b>
        <i>
          {{ course.objectivies |safe }}
        </i>
      </p>
      <div class="row">
              <div class="col-xs-6 col-md-6 data_register_course">
                <p><b>{% trans 'Begin of Course Date' %}: </b>{{course.init_date}}</p>
              </div>
              <div class="col-xs-6 col-md-6 data_register_course">
                <p><b>{% trans 'End of Course Date' %}: </b>{{course.end_date}}</p>
              </div>
            </div>
    </div>
  </div>

<!-- MODAL CREATE SUBJECT -->
<div class="modal" tabindex="-1" role="dialog  " id="createSubject">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">{% trans "Create a New Subject" %}</h4>
      </div>
      <div class="modal-body">
        <div>
        </div>
        <div class="modal-footer">
          <button type="button" data-dismiss="modal" class="btn btn-default btn-raised">{% trans "Cancel" %}</button>
          <a href="#" target="_self"><button type="button" class="btn btn-primary btn-raised"> {% trans "Confirm" %}</button></a>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="panel-group ui-accordion ui-widget ui-helper-reset ui-sortable" id="accordion" role="tablist" aria-multiselectable="false">
  <div>

  <div class="panel panel-info">
</div>
</div>
<div class="cards-detail">
    {% for subject in subjects %}
        <div class="panel panel-default panel_{{ subject.id }}">
          <div class="panel-heading heading_{{subject.id}} subject ui-sortable-handle">
            <div class="row">
                <div class="col-md-1 moreAccordion" data-toggle="collapse" data-parent="#accordion-{{subject.slug}}" href=".collapseSubject-{{subject.slug}}" aria-expanded="false" aria-controls="collapseSubject-{{subject.slug}}">
                  <button class="btn btn-default btn-sm caret-square"><i class="fa fa-caret-square-o-down fa-2x" aria-hidden="true"></i></button>
                </div>
                <div class="col-xs-9 col-md-10 titleTopic">
                  <a role="button" href="{% url 'course:view_subject' subject.slug %}">
                    <h4>{{subject.name}}</h4>
                  </a>
                </div>
                {% if user|has_role:'professor' or user|has_role:'system_admin' %}
                  <div class="col-xs-3 col-md-1" id="divMoreActions">
                    <div class="btn-group">
                      <button class="btn btn-default btn-sm dropdown-toggle" type="button" id="moreActions" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        <i class="fa fa-ellipsis-v fa-2x" aria-hidden="true"></i>
                      </button>
                      <ul class="dropdown-menu pull-right" aria-labelledby="moreActions">
                        <li><a href="{% url 'course:replicate_subject' subject.slug %}"><i class="fa fa-files-o fa-fw" aria-hidden="true"></i>&nbsp; {% trans "Replicate" %}</a></li>
                        <li><a href="{% url 'course:update_subject' subject.slug %}"> <i class="fa fa-pencil fa-fw" aria-hidden="true"></i>&nbsp; {% trans "Edit" %}</a></li>
                        <li><a href="{% url 'course:delete_subject' subject.slug %}" ><i class="fa fa-trash fa-fw" aria-hidden="true"></i>&nbsp; {% trans "Remove" %}</a></li>
                      </ul>

                    </div>
                  </div>
                {% endif %}

                {% if user|show_subject_subscribe:subject %}
                  <div class="col-xs-3 col-md-2">
                    <a onclick="subscribe($(this), '{% url 'course:subscribe_subject' subject.slug %}', {{ subject.id }}, '{% trans 'Are you sure you want to subscribe to this subject?' %}')" class="btn btn-sm btn-primary btn-raised">{% trans 'Subscribe' %}</a>
                  </div>
                {% endif %}
            </div>
          </div>
          <div class="panel-collapse collapseSubject-{{subject.slug}} collapse in" aria-labelledby="heading_{{subject.id}}" aria-expanded="true" aria-hidden="false">
           <div class="panel-body">
            <p><b>{% trans "Professor" %}: </b>{% for professor in subject.professors.all %}{% if not forloop.first %},{% endif %}
              {{professor}}{% if forloop.last %}.{% endif %}{% endfor %}</p>
              <p>
                <b>{% trans 'Category' %}: </b><i>{{ subject.category }}</i>
              </p>
              <p>
                <b>{% trans "Description" %}: </b>
                <i>
                  {{subject.description | safe}}
                </i>
              </p>
              <div class="row">
                <div class="col-xs-6 col-md-6">
                  <p><b>{% trans "Begining" %}: </b>{{subject.init_date}}</p>
                </div>
                <div class="col-xs-6 col-md-6">
                  <p><b>{% trans "End" %}: </b>{{subject.end_date}}</p>
                </div>
              </div>
          </div>
         </div>
        </div>
    {% endfor %}


{% if  user|has_role:'professor' and user in course.professors.all or user|has_role:'system_admin' %}

    <div class="form-group">
    <a href="{% url 'course:create_subject' course.slug %}" data-toggle="modal" data-target="" class="btn btn-primary btn-lg btn-block btn-raised">{% trans 'Create Subject' %}<div class="ripple-container"></div></a>
  </div>
{% endif %}

</div>
</div>
</div>
<div class="row" id="modal_subject">

{% endblock %}