{% load static i18n list_topic_foruns permission_tags widget_tweaks professor_access list_topic_exercises%}

<div class="panel panel-default cards-detail">
  <div class="panel-heading topic">
    <div class="row">
      <div class="col-md-1 moreAccordion" data-toggle="collapse" data-parent="#accordion-{{topic.slug}}" href=".collapseTopic-{{topic.slug}}" aria-expanded="false" aria-controls="collapseTopic-{{topic.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-9 titleTopic">
        <a href="{% url 'course:view_topic' topic.slug %}" role="button">
          <h4>{{topic}}</h4>
        </a>
      </div><!--column -->
      <div class="col-xs-3 col-md-2 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>

          {# dropdown de topic com as opções de replicar, editar e deletar #}
          {% professor_subject topic.subject user as dropdown_topic %}
          {% if dropdown_topic %}
          <ul class="dropdown-menu pull-right" aria-labelledby="moreActions">
            <li><a href="{% url 'course:replicate_topic' topic.slug %}"><i class="fa fa-files-o fa-fw" aria-hidden="true"></i>&nbsp; {% trans "Replicate" %}</a></li>
            <li><a href="javascript:show_editation('{{topic.slug}}')"><i class="fa fa-pencil fa-fw" aria-hidden="true"></i>&nbsp; {% trans "Edit" %}</a></li>
            <li><a href="javascript:void(0)" data-toggle="modal" data-target="#removeTopic"><i class="fa fa-trash fa-fw" aria-hidden="true"></i>&nbsp; {% trans "Remove" %}</a></li>
          </ul>


          {% endif %}
        </div>
      </div>
    </div>
  </div>
  <div class="panel-collapse collapseTopic-{{topic.slug}} topic_{{ topic.id }} collapse in" role="tabpanel" aria-labelledby="heading_{{topic.id}}" aria-expanded="true" aria-hidden="false">
    <div class="panel-body">

      {# dados do tópico no modo de visualização #}
      <div class="presentation_{{topic.slug}}">
        <p>
          <i>
            {{topic.description|safe}}
          </i>
        </p>
      </div>

      {# dados dos topicos no modo de edição #}
      <div class="form-group editation editation_{{topic.slug}}">
        <label class="control-label" for="focusedInput2">{% trans 'Name Topic' %}</label>
        <input type="text" class="form-control" value="{{topic}}">
      </div>
      <div class="form-group editation editation_{{topic.slug}}">
        <label class="control-label" for="focusedInput2">{% trans 'Description' %}</label>
        <textarea class="form-control" rows="3" id="summernote">{{topic.description}}</textarea>
      </div>

      {# materiais do topico#}
      <div class="row">
        <div class="col-xs-4 col-md-4">
          <div class="resource_inline">
            <h4>{% trans 'Material' %}</h4>
          </div>
          <div class="resource_inline">

            {# dropdown de create material #}
            <div class="dropdown">
              <a href="#" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fa fa-plus-circle fa-lg" aria-hidden="true"></i></a>
              <ul class="dropdown-menu" aria-labelledby="dLabel">
                <li><a href="javascript:modal.get('{% url 'course:links:create_link' topic.slug %}', '#createLinksModal','#requisicoes_ajax')  ">{% trans 'Create a Link' %}</a></li>
                <li><a href="javascript:modal.get('{% url 'course:file:create_file' topic.slug %}', '#fileModal', '#requisicoes_ajax')">{% trans "Create a file" %}</a></li>
              </ul>
            </div>
          </div>
          <div class="presentation_{{topic.slug}}">

            {# materiais do tópico no modo de visualização #}
            <ul>
              {% list_topic_file request topic %}
              {% list_topic_link request topic%}
            </ul>
          </div>
          <div class="editation editation_{{topic.slug}}">

            {# materiais do tópico no modo de edição #}
            <ul>
              {% list_topic_file_edit request topic %}
              {% list_topic_link_edit request topic%}
            </ul>
          </div>
        </div>

        {# avaliações do topico #}
        <div class="col-xs-4 col-md-4">
          <div class="resource_inline">
            <h4>{% trans 'Activities' %}</h4>
          </div>
          <div class="resource_inline">

            {# dropdown de avaliações #}
            <div class="dropdown">
              <a href="#" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fa fa-plus-circle fa-lg" aria-hidden="true"></i></a>
              <ul class="dropdown-menu" aria-labelledby="dLabel">
                <li><a href="javascript:createForum('{% url 'course:forum:create' %}', '{{ topic.id }}')">{% trans 'Create Forum' %}</a></li>

                <li><a href="javascript:modal.get('{% url 'course:poll:create_poll' topic.slug%}','#poll','#requisicoes_ajax');">{% trans 'Create Poll' %}</a></li>
              </ul>
            </div>
          </div>
          <div class="presentation_{{topic.slug}}">

            {# avaliações do tópico no modo de visualização #}
            <ul>
              {% list_topic_poll request topic %}
              {% list_topic_foruns request topic %}
            </ul>
          </div>
          <div class="editation editation_{{topic.slug}}">

            {# avaliações do tópico no modo de edição #}
            <ul>
              {% list_topic_poll_teacher request topic %}
              {% list_topic_foruns request topic %}
            </ul>
          </div>
        </div>
          <div class="resource_inline">
            <h4>{% trans 'Exercises' %}</h4>
          </div>
          <div class="resource_inline">
            {# dropdown de create exercício #}
            <div class="dropdown">
              <a href="#" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fa fa-plus-circle fa-lg" aria-hidden="true"></i></a>
              <ul class="dropdown-menu" aria-labelledby="dLabel">
                <li><a href="javascript:modal.get('{% url 'course:exercise:create_exercise' topic.slug %}', '#createExercisesModal','#requisicoes_ajax')">{% trans 'Create a general exercise' %}</a></li>
              </ul>
            </div>
          </div>
      </div>

      {# opções de cancelar e editar no modo de edição #}
      <div class="form-group editation editation_{{topic.slug}}">
        <div class="col-md-10">
          <a href="javascript:show_presentation('{{topic.slug}}')" class="btn btn-raised btn-default">{% trans 'Back' %}</a>
          {# <a href="javascript:show_presentation('{{topic.slug}}')" class="btn btn-raised btn-primary">{% trans 'Submit' %}</a>#}
        </div>
      </div>
    </div>
  </div>
</div>

<!-- MODALs -->


<!-- MODAL REMOVE TOPIC -->
<div class="modal" id="{{topic.slug}}">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">X</button>
        <h4 class="modal-title"></h4>
      </div>
      <div class="modal-body">
        <p>{% trans 'Delete your Topic?' %}</p>
      </div>
      <div class="modal-footer">

        <a href="" target="_self"><button type="button" class="btn btn-primary">{% trans 'Confirm' %}</button></a>

      </div>
    </div>
  </div>
</div>
<!-- END -->

<!-- MODAL EMBEED-->
<div class="modal fade" id="embedModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
        <h4 class="modal-title" id="myModalLabel">{% trans 'Material EMBED' %}</h4>
      </div>
      <div class="modal-body">
        <div class="form-group is-empty">
          <label for="inputEmail" class="col-md-2 control-label">{% trans 'Name' %}:</label>
          <div class="col-md-10">
            <input type="text" class="form-control" id="inputEmail" placeholder="Name">
          </div>
        </div>
        <form class="form-horizontal">
          <div class="form-group is-empty">
            <label for="textArea" class="col-md-2 control-label">{% trans 'Code' %}:</label>

            <div class="col-md-10">
              <textarea class="form-control" rows="2" id="textArea"></textarea>
              <span class="help-block">{% trans 'Material description' %}</span>
            </div>
          </div>
          <div class="form-group is-empty">
            <label for="number" class="col-md-2 control-label">{% trans 'Height' %}</label>
            <div class="col-md-4">
              <input type="number" class="form-control" id="inputNumber" placeholder="Heiht">
            </div>
          </div>
          <div class="form-group is-empty">
            <label for="number" class="col-md-2 control-label">{% trans 'Weight' %}</label>
            <div class="col-md-4">
              <input type="number" class="form-control" id="inputNumber" placeholder="Weight">
            </div>
          </div>
        </form>

      </div>
      <div class="modal-footer">
        <!-- Don't remove that!!!
        {# <button type="button" class="btn btn-danger btn-raised" data-dismiss="modal">Close</button>-->#}

        <!-- Put curtom buttons here!!!  -->
        <button type="button" class="btn btn-primary btn-raised">{% trans 'Confirm' %}</button>
      </div>
    </div>
  </div>
</div>
<!-- EndModal -->