{% if h.is_enabled_resources() %}

  {% extends "package/base.html" %}

  {% block styles %}
    {{ super() }}
    {% asset 'feedback/feedback-comment-css' %}
  {% endblock %}

  {% block breadcrumb_content_selected %} class="inactive"{% endblock %}

  {% block breadcrumb_content %}
    {{ super() }}
    <li class="inactive"><a href="{{ h.url_for('dataset.search') }}{{ pkg_dict.name }}/resource/{{ resource.id }}">{{ resource.name|truncate(30) }}</a></li>
    <li class="active"><a href="#">{{ _('Comment') }}</a></li>
  {% endblock %}

  {% block primary %}
    <article class="module" role="main">
      <div class="module-content">
        <div class="centered-content">
          <h4>{{ _('Dataset') }}</h4>
          <a href="{{ h.url_for('dataset.search') }}{{ pkg_dict.name }}">{{ pkg_dict.name }}</a>
          <hr>
          <h4>{{ _('Resource') }}</h4>
          <a href="{{ h.url_for('dataset.search') }}{{ pkg_dict.name }}/resource/{{ resource.id }}">{{ resource.name }}</a>
          <hr>
          <h4>{{ _('Comments') }}</h4>
          <p>{{ h.get_resource_comments(resource.id) }}</p>
          <hr>
          <h4>{{ _('Comment') }}</h4>
          {% if not cookie or not h.is_disabled_repeated_post_on_resource() %}
            {{ _('Rating') }}
            <span class="group-stars" id="rateable" name="rateable">
              {% for i in range(5) %}
                <img class="rating-star" src="/images/empty_rating_star.png" alt="rating star" data-rating="{{ i + 1 }}" onclick="selectRating(this);"/>
              {% endfor %}
            </span>
            <div>
              <p id="rating-error" class="alert alert-error" style="display: none;">{{ _('Please select your rating') }}</p>
            </div>
            <br>
            <form name="comment_form" action="{{ url_for('resource_comment.create_comment', resource_id=resource.id ) }}" method="post">
              <input type="hidden" id="rating" name="rating" value=""/>
              <select name="category" id="category">
                {% for category in categories %}
                  <option value="{{ category.name }}">{{ _(category.value) }}</option>
                {% endfor %}
              </select>
              <br>
              <br>
              <textarea class="form-control" cols="20" rows="5" id="comment_content" name="comment_content"></textarea>
              <div>
                <p id="comment-error" class="alert alert-error" style="display: none;">{{ _('Please enter your comment') }}</p>
              </div>
              {% if h.is_disabled_repeated_post_on_resource() %}
                <p class="comment-explanation">{{ _('(In order to prevent potential spam, only a single comment is allowed per data resouce)') }}</p>
              {% endif %}
              <br>
              <div class="form-actions">
                <button class="btn btn-primary" onclick="return checkRatingAndCommentExists();">{{ _('Send') }}</button>
              </div>
              <br>
              <br>
            </form>
          {% else %}
            <p class="comment-disallowed">{{ _('* You have already commented on this data resource') }}</p>
            <p class="comment-explanation">{{ _('(In order to prevent potential spam, only a single comment is allowed per data resouce)') }}</p>
          {% endif %}
          <br>
          {% if comments|length %}
            <hr class="divider">
          {% endif %}
          {% for comment in comments %}
            {% set created = comment.created.strftime('%Y/%m/%d %H:%M') %}
            {% set reply = h.get_comment_reply(comment.id) %}
            {% if c.userobj.sysadmin %}
              {% if comment.approval %}
                {% if not reply %}
                  <input type="button" class="btn btn-primary pull-right" data-toggle='modal' data-target='#reply-form-window' onclick="setReplyFormContent('{{ comment.id }}', '{{ created }}', '{{ comment.category.name }}','{{ comment.content }}')" value="{{ _('Reply') }}"/>
                {% else %}
                  <input type="button" class="btn btn-primary pull-right" value="{{ _('Reply') }}" disabled/>
                {% endif %}
              {% else %}
                <form name="approval_form" action="{{ url_for('resource_comment.approve_comment', resource_id=resource.id ) }}" method="post">
                    <button class="btn btn-primary pull-right" id="resource_comment_id" name="resource_comment_id" value="{{ comment.id }}">{{ _('Approve') }}</button>
                </form>
              {% endif %}
            {% endif %}
            <h4>
              {{ created }}
              {% for category in categories %}
                {% if comment.category.name in category.name %}
                  {{ _(comment.category.value) }}
                {% endif %}
              {% endfor %}
              <span class="group-stars">
                {% for i in range(comment.rating) %}
                  <img class="rating-star" src="/images/rating_star.png" alt="rating star"/>
                {% endfor %}
                {% for i in range(5 - comment.rating) %}
                  <img class="rating-star" src="/images/empty_rating_star.png" alt="empty rating star"/>
                {% endfor %}
              </span>
              {% if not comment.approval %}
                {{ _('Unapproved') }}
              {% endif %}
            </h4>
            <div class="comment-content {{'unapproved' if not comment.approval }}">
              <p>{{ comment.content }}</p>
            </div>
            {% if reply %}
              <hr>
              <h4 class="reply">{{ reply.created.strftime('%Y/%m/%d %H:%M') }}</h4>
              <p class="comment-content reply">{{ reply.content }}</p>
            {% endif %}
            <hr class="divider">
          {% endfor %}
        </div>
      </div>
    </article>

    <div id="reply-form-window" class="modal fade" tabindex="-1">
      <div class="modal-dialog">
        <div class="modal-content">
          <form id="reply-form" class="top-centered-content" action="{{ url_for('resource_comment.reply', resource_id=resource_id ) }}" method="post">
            <input type="hidden" id="resource_comment_id" name="resource_comment_id">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>
            <div class="modal-body">
              <h4 id="selected_comment_header"></h4>
              <p class="comment-content" id="selected_comment"></p>
              <div class="form-group control-full">
                <label class="control-label" for="code">{{ _('Input') }}</label>
                <div class="controls ">
                  <textarea id="reply_content" name="reply_content" cols="20" rows="3" placeholder="" class="form-control"></textarea>
                </div>
                <div>
                  <p id="reply-error" class="alert alert-error" style="display: none;">{{ _('Please enter your reply') }}</p>
                </div>
              </div>
            </div>
            <div class="modal-footer">
              <button class="btn btn-primary" onclick="return checkReplyExists();">{{ _('Send') }}</button>
            </div>
          </form>
        </div>
      </div>
    </div>
  {% endblock -%}

  {% block secondary %}{% endblock %}

  {%- block scripts %}
    {{ super() }}
    {% asset 'feedback/feedback-comment-js' %}
  {% endblock -%}

{% endif %}
