{% if h.is_enabled_resources() %}

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

  {% block styles %}
    {{ super() }}
    {% asset 'feedback/feedback-comment-css' %}
    {% asset 'feedback/feedback-tooltip-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 title %}{{ _('Comment on Resource') }} - {{ pkg_dict.title }} - {{ resource.name }} - CKAN{% endblock %}

  {% block primary %}
    <article class="module" role="main">
      <input type="hidden" id="resource-id" value="{{ resource.id }}">
      <input type="hidden" id="current-type" name="current-type" value="comment">
      <div class="module-content">
        <div>
          <div class="wrap-text">
            <h4>{{ _('Dataset') }}</h4>
            <a href="{{ h.url_for('dataset.search') }}{{ pkg_dict.name }}">{{ pkg_dict.title }}</a>
            <hr>
            <h4>{{ _('Resource') }}</h4>
            <a href="{{ h.url_for('dataset.search') }}{{ pkg_dict.name }}/resource/{{ resource.id }}">{{ resource.name }}</a>
            <hr>
          </div>
          <h4>{{ _('Comments') }}</h4>
          <p>{{ h.get_resource_comments(resource.id) }}</p>
          <hr>
          <h4>{{ _('Comment') }}</h4>
          {% if h.is_disabled_repeat_post_on_resource(pkg_dict.owner_org) %}
            <p class="comment-explanation">{{ _('(In order to prevent potential spam, only a single comment is allowed per data resouce)') }}</p>
            <br>
            <br>
          {% endif %}
          {% if not cookie or not (h.is_disabled_repeat_post_on_resource(pkg_dict.owner_org)) %}
            {% if h.is_enabled_rating(pkg_dict.owner_org) %}
              {{ _('Rating') }}
              <span class="group-stars" id="rateable" name="rateable">
                {% for i in range(5) %}
                  <i class="rating-star fa-regular fa-star" data-rating="{{ i + 1 }}" onclick="selectRating(this);"></i>
                {% endfor %}
              </span>
              <div>
                <p id="rating-error" class="alert alert-error" style="display: none;">{{ _('Please select your rating') }}</p>
              </div>
            {% endif %}
            <br>
            <form id="comment_form" name="comment_form" action="{{ h.url_for('resource_comment.check_comment', resource_id=resource.id ) }}" method="post" enctype="multipart/form-data">
              <input type="hidden" id="rating" name="rating" value=""/>
              <input type="hidden" id="package_name" name="package_name" value="{{ pkg_dict.name }}">
              {% for category in categories %}
              <label class="radio">
                <input type="radio" name="category" value="{{ category.name }}" {% if category.name == selected_category %}checked{% endif %}>
                {{ h.create_category_icon(category.value) | safe }}
                {{ _(category.value) }}
              </label>
              {% endfor %}
              <br>
              <br>
              <textarea class="form-control resize-vertical" cols="20" rows="5" id="comment-content" name="comment-content" maxlength="1000"></textarea>
              <div class="char-count text-end"><span name="comment-count">0</span>/1000</div>
              <div>
                <p id="comment-none-error" class="alert alert-error" style="display: none;">{{ _('Please enter your comment') }}</p>
                <p id="comment-over-error" class="alert alert-error" style="display: none;">{{ _('Please keep the comment length below 1000') }}</p>
              </div>
              <div class="comment-form-footer">
                {% if h.is_enabled_image_attachment(pkg_dict.owner_org) %}
                  <div class="image-upload-section">
                    <button id="uploadBtn" type="button" class="btn btn-default" onclick="uploadClicked();">
                      <i class="fa-solid fa-image"></i>
                      {{ _('Image Attachment') }}
                    </button>
                    <div id="previewContainer"></div>
                    <input type="file" id="imageUpload" class="imageUpload" name="attached_image" accept="image/*">
                  </div>
                {% endif %}
                <div class="form-actions">
                  <button class="btn btn-primary" id="comment-button" name="send-button" onclick="return checkCommentExists(this);">
                    <i class="fa-solid fa-chevron-right"></i>
                    {{ _('Review') }}
                  </button>
                </div>
              </div>
              <div class="notice-container">
                <h3>
                  <span><i class="fa-solid fa-triangle-exclamation"></i></span>
                  <span>{{ _('Please check before sending') }}</span>
                </h3>
                <h4>{{ _('Comment Policy') }}</h4>
                <ul>
                  <li><strong>{{ _('Constructive criticism') }}: </strong>{{ _('When seeking improvements, provide constructive and specific criticism. Including alternative suggestions or problem-solving proposals can lead to improvements that meet the needs.') }}</li>
                  <li><strong>{{ _('Respect Privacy and Ethics') }}: </strong>{{ _('When posting comments, remember to protect personal information and consider ethical implications.') }}</li>
                  <li><strong>{{ _('Positive Feedback') }}: </strong>{{ _('Positive comments contribute more to the motivation of data providers and provide valuable deta than aggressive negative comments.') }}</li>
                </ul>
              </div>
              <br>
              <br>
            </form>
          {% else %}
            <p class="comment-disallowed">{{ _('* You have already commented on this data resource') }}</p>
          {% endif %}
          <br>
          {% if page.collection|length %}
            <hr class="divider">
          {% endif %}
          {% for comment in page.collection %}
          {% set replies = h.get_comment_replies_for_display(comment.id, resource.package.owner_org) %} 
            <div class="custom-rounded-padding {{'unapproved' if not comment.approval }}">
              <div class="comment-top-section">
                <div id="comment-header-{{ comment.id }}" class="d-flex align-items-center">
                  {% if not comment.approval %}
                    <span class="font-bold me-2">({{ _('Unapproved') }})</span>
                  {% endif %}
                  {% if comment.category %}
                    <span id="comment-category-{{ comment.id }}" class="font-bold me-2">
                      {{ h.create_category_icon(comment.category.value) | safe }}
                      {{ _(comment.category.value) }}
                    </span>
                  {% endif %}
                  {% if h.is_enabled_rating(pkg_dict.owner_org) %}
                    {% if comment.rating %}
                      <span class="group-stars">
                        {% for i in range(comment.rating) %}
                          <i class="rating-star fa-solid fa-star"></i>
                        {% endfor %}
                        {% for i in range(5 - comment.rating) %}
                          <i class="rating-star fa-regular fa-star"></i>
                        {% endfor %}
                      </span>
                    {% endif %}
                  {% endif %}
                  <span id="comment-created-{{ comment.id }}" class="automatic-local-datetime me-2" data-datetime="{{ h.render_datetime(comment.created, date_format='%Y-%m-%dT%H:%M:%S%z') }}">
                    {{ h.render_datetime(comment.created, with_hours=True) }}
                  </span>
                  {% if comment.reactions %}
                    {% set resource_comment_component = h.CommentComponent(comment.id) %}
                    {{ resource_comment_component.create_status_badge(comment.reactions.response_status.value) | safe }}
                    {% if comment.reactions.admin_liked %}
                      <span id="admin-liked-{{ comment.id }}" class="fa-stack bubble me-2">
                        <i class="fas fa-user-tie fa-stack-1x"></i>
                        <i class="fas fa-heart fa-stack-1x" style="color: #e83e8c; position: absolute; bottom: 15%; left: 25%; font-size: 10px;"></i>
                        <div class="bubbleText">{{ _('Highly rated by organization administrators') }}</div>
                      </span>
                    {% endif %}
                  {% endif %}
                </div>
                <div id="comment-action-buttons" class="comment-action-buttons">
                  {% if c.userobj and (c.userobj.sysadmin or h.has_organization_admin_role(resource.package.owner_org)) %}
                      <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#reactions-form-window" data-resource-comment-id="{{ comment.id }}" onclick="setReactionsFormContent('{{ comment.id }}')">
                        <i class="fa-solid fa-rotate"></i>
                        {{ _('Status Change') }}
                      </button>
                  {% endif %}

                  {% set reply_open = h.is_resource_reply_open(resource.package.owner_org) %}
                  {% if comment.approval and (reply_open or (c.userobj and c.userobj.sysadmin) or h.has_organization_admin_role(resource.package.owner_org)) %}
                      <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#reply-form-window" onclick="setReplyFormContent('{{ comment.id }}')">
                        <i class="fa-solid fa-reply"></i>
                        {{ _('Reply') }}
                      </button>
                  {% endif %}

                  {% if c.userobj and (c.userobj.sysadmin or h.has_organization_admin_role(resource.package.owner_org)) and not comment.approval %}
                    <form class="inline-form" name="approval_form" style="margin-bottom: 0;" action="{{ h.url_for('resource_comment.approve_comment', resource_id=resource.id) }}" method="post">
                      <button class="btn btn-primary" id="resource_comment_id" name="resource_comment_id" value="{{ comment.id }}" onclick="setButtonDisable(this);">
                        <i class="fa-solid fa-check"></i>
                        {{ _('Approve') }}
                      </button>
                    </form>
                  {% endif %}
                </div>
              </div>
              <div class="wrap-text">
                {% if comment.content %}
                  <div class="comment-container">
                    <span class="comment-content" id="comment-content-{{ comment.id }}">{{ comment.content }}</span>
                  </div>
                {% endif %}
                {% if comment.attached_image_filename %}
                  <div>
                    <a href="{{h.url_for('resource_comment.attached_image', resource_id=resource.id, comment_id=comment.id, attached_image_filename=comment.attached_image_filename ) }}" target="_blank">
                      <img src="{{h.url_for('resource_comment.attached_image', resource_id=resource.id, comment_id=comment.id, attached_image_filename=comment.attached_image_filename ) }}" alt="{{ _('Attached Image') }}" class="attached-image">
                    </a>
                  </div>
                {% endif %}
                {% if replies and replies|length %}
                  <hr>
                  <div class="reply">
                    {% if replies|length > 3 %}
                      
                      <div id="replies-hidden-{{ comment.id }}" style="display: none;">
                        {% for reply in replies %}
                          <div class="{{ 'unapproved' if not reply.approval }}">
                            <div class="comment-top-section">
                              {% set is_admin_reply = h.user_has_organization_admin_role(reply.creator_user_id, resource.package.owner_org) %}
                              <i class="fa-solid fa-reply"></i>
                              {% if is_admin_reply %}
                                <i class="fa-solid fa-user-tie"></i>
                              {% endif %}
                              <span class="font-bold">
                                {% if is_admin_reply %}
                                  {{ _('Reply from the Administrator') }}
                                {% else %}
                                  {{ _('Reply') }}
                                {% endif %}
                              </span>
                              {% if not reply.approval %}
                                <span class="font-bold me-2">({{ _('Unapproved') }})</span>
                              {% endif %}
                              <span class="automatic-local-datetime" data-datetime="{{ h.render_datetime(reply.created, date_format='%Y-%m-%dT%H:%M:%S%z') }}">
                                {{ h.render_datetime(reply.created, with_hours=True) }}
                              </span>
                              {% if c.userobj and (c.userobj.sysadmin or h.has_organization_admin_role(resource.package.owner_org)) %}
                                <div class="comment-action-buttons">
                                  {% if not reply.approval %}
                                    <form class="inline-form" name="approve_reply_form" style="margin-bottom: 0;" action="{{ h.url_for('resource_comment.approve_reply', resource_id=resource.id) }}" method="post">
                                      <button class="btn btn-primary" name="resource_comment_reply_id" value="{{ reply.id }}" onclick="setButtonDisable(this);">
                                        <i class="fa-solid fa-check"></i>
                                        {{ _('Approve') }}
                                      </button>
                                    </form>
                                  {% endif %}
                                </div>
                              {% endif %}
                            </div>
                            <div class="comment-container">
                              <span class="comment-content">{{ reply.content }}</span>
                            </div>
                            {% if reply.attached_image_filename %}
                              <div>
                                <a href="{{h.url_for('resource_comment.reply_attached_image', resource_id=resource.id, reply_id=reply.id, attached_image_filename=reply.attached_image_filename ) }}" target="_blank">
                                  <img src="{{h.url_for('resource_comment.reply_attached_image', resource_id=resource.id, reply_id=reply.id, attached_image_filename=reply.attached_image_filename ) }}" alt="{{ _('Attached Image') }}" class="attached-image">
                                </a>
                              </div>
                            {% endif %}
                          </div>
                          {% if not loop.last %}<hr>{% endif %}
                        {% endfor %}
                      </div>
                      <div>
                        <button type="button"
                                id="replies-toggle-{{ comment.id }}"
                                class="btn btn-link p-0"
                                data-count="{{ replies|length }}"
                                data-show-text="{{ _('Show replies') }}"
                                data-hide-text="{{ _('Hide replies') }}"
                                onclick="toggleReplies('{{ comment.id }}')">
                          {{ _('Show replies') }} ({{ replies|length }})
                        </button>
                      </div>
                    {% else %}
                      
                      {% for reply in replies %}
                        <div class="{{ 'unapproved' if not reply.approval }}">
                          <div class="comment-top-section">
                            {% set is_admin_reply = h.user_has_organization_admin_role(reply.creator_user_id, resource.package.owner_org) %}
                            <i class="fa-solid fa-reply"></i>
                            {% if is_admin_reply %}
                              <i class="fa-solid fa-user-tie"></i>
                            {% endif %}
                            <span class="font-bold">
                              {% if is_admin_reply %}
                                {{ _('Reply from the Administrator') }}
                              {% else %}
                                {{ _('Reply') }}
                              {% endif %}
                            </span>
                            {% if not reply.approval %}
                              <span class="font-bold me-2">({{ _('Unapproved') }})</span>
                            {% endif %}
                            <span class="automatic-local-datetime" data-datetime="{{ h.render_datetime(reply.created, date_format='%Y-%m-%dT%H:%M:%S%z') }}">
                              {{ h.render_datetime(reply.created, with_hours=True) }}
                            </span>
                            {% if c.userobj and (c.userobj.sysadmin or h.has_organization_admin_role(resource.package.owner_org)) %}
                              <div class="comment-action-buttons">
                                {% if not reply.approval %}
                                  <form class="inline-form" name="approve_reply_form" style="margin-bottom: 0;" action="{{ h.url_for('resource_comment.approve_reply', resource_id=resource.id) }}" method="post">
                                    <button class="btn btn-primary" name="resource_comment_reply_id" value="{{ reply.id }}" onclick="setButtonDisable(this);">
                                      <i class="fa-solid fa-check"></i>
                                      {{ _('Approve') }}
                                    </button>
                                  </form>
                                {% endif %}
                              </div>
                            {% endif %}
                          </div>
                          <div class="comment-container">
                            <span class="comment-content">{{ reply.content }}</span>
                          </div>
                          {% if reply.attached_image_filename %}
                            <div>
                              <a href="{{h.url_for('resource_comment.reply_attached_image', resource_id=resource.id, reply_id=reply.id, attached_image_filename=reply.attached_image_filename ) }}" target="_blank">
                                <img src="{{h.url_for('resource_comment.reply_attached_image', resource_id=resource.id, reply_id=reply.id, attached_image_filename=reply.attached_image_filename ) }}" alt="{{ _('Attached Image') }}" class="attached-image">
                              </a>
                            </div>
                          {% endif %}
                        </div>
                        {% if not loop.last %}<hr>{% endif %}
                      {% endfor %}
                    {% endif %}
                  </div>
                {% endif %}
              </div>
            </div>
            <hr class="divider">
          {% endfor %}
          {% block page_pagination %}
            {{ page.pager(resource_id=resource.id) }}
          {% endblock %}
        </div>
      </div>
    </article>

    <div id="reactions-form-window" class="modal fade" tabindex="-1">
      <div class="modal-dialog">
        <div class="modal-content">
          <form id="reactions-form" action="{{ h.url_for('resource_comment.reactions', resource_id=resource.id) }}" method="post">
            <input type="hidden" id="reactions-comment-id" name="resource_comment_id">
            <div class="modal-header">
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
              <div id="reactions-comment-header"></div>
              <div class="comment-container">
                <span class="comment-content" id="reactions-comment"></span>
              </div>
              <hr>
              <div>
                <label class="control-label" for="code">{{ _('Status') }}</label>
                <div class="status-controls" style="font-size: large;">
                  <div class="status-option">
                    <input id="status-none" type="radio" name="response_status" value="status-none" checked>
                    <span class="badge badge-pill badge-none">{{ _('Status None') }}</span>
                  </div>
                  <div class="status-option">
                    <input id="status-not-started" type="radio" name="response_status" value="not-started">
                    <span class="badge badge-pill badge-not-started">{{ _('Not Started') }}</span>
                  </div>
                  <div class="status-option">
                    <input id="status-in-progress" type="radio" name="response_status" value="in-progress">
                    <span class="badge badge-pill badge-in-progress">{{ _('In Progress') }}</span>
                  </div>
                  <div class="status-option">
                    <input id="status-completed" type="radio" name="response_status" value="completed">
                    <span class="badge badge-pill badge-completed">{{ _('Completed') }}</span>
                  </div>
                  <div class="status-option">
                    <input id="status-rejected" type="radio" name="response_status" value="rejected">
                    <span class="badge badge-pill badge-rejected">{{ _('Rejected') }}</span>
                  </div>
                </div>
                <label class="control-label" for="code">{{ _('Highly rated by organization administrators') }}</label>
                <div class="like-controls" style="font-size: large;">
                  <div class="like-option">
                    <input type="checkbox" id="admin-liked" name="admin_liked">
                    <span class="fa-stack">
                      <i class="fas fa-user-tie fa-stack-1x"></i>
                      <i class="fas fa-heart fa-stack-1x" style="color: #e83e8c; position: absolute; bottom: 15%; left: 28%; font-size: 10px;"></i>
                    </span>
                  </div>
                </div>
              </div>
            </div>
            <div class="modal-footer">
              <button class="btn btn-primary">
                <i class="fa-solid fa-paper-plane"></i>
                {{ _('Send') }}
              </button>
            </div>
          </form>
        </div>
      </div>
    </div>

    <div id="reply-form-window" class="modal fade" tabindex="-1">
      <div class="modal-dialog reply-modal">
        <div class="modal-content">
          <form id="reply-form" name="reply_form" action="{{h.url_for('resource_comment.reply', resource_id=resource.id ) }}" method="post" enctype="multipart/form-data">
            <input type="hidden" id="reply-comment-id" name="resource_comment_id">
            <div class="modal-header">
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
              <div id="reply-comment-header"></div>
              <div class="comment-container">
                <span class="comment-content" id="reply-comment"></span>
              </div>
              <hr>
              <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 resize-vertical" maxlength="1000"></textarea>
                  <div class="char-count text-end"><span id="reply-count">0</span>/1000</div>
                </div>
                <div>
                  <p id="reply-error" class="alert alert-error" style="display: none;">{{ _('Please enter your reply') }}</p>
                  <p id="reply-over-error" class="alert alert-error" style="display: none;">{{ _('Please keep the comment length below 1000') }}</p>
                </div>
              </div>
              {% if h.is_enabled_image_attachment(pkg_dict.owner_org) %}
                <div id="replyPreviewContainer" class="reply-preview-container" style="display: none;">
                  <span class="text-muted">{{ _('Image preview will appear here') }}</span>
                </div>
              {% endif %}
            </div>
            <div class="modal-footer d-flex justify-content-between align-items-center">
              {% if h.is_enabled_image_attachment(pkg_dict.owner_org) %}
                <div class="reply-image-upload d-flex align-items-center">
                  <button id="replyUploadBtn" type="button" class="btn btn-default" onclick="replyUploadClicked();">
                    <i class="fa-solid fa-image"></i>
                    {{ _('Image Attachment') }}
                  </button>
                  <input type="file" id="replyImageUpload" class="imageUpload" name="attached_image" accept="image/*">
                </div>
              {% else %}
                <div></div>
              {% endif %}
              <div class="reply-send-buttons d-flex align-items-center">
                <button class="btn btn-primary" onclick="return checkReplyExists(this);">
                  <i class="fa-solid fa-paper-plane"></i>
                  {{ _('Send') }}
                </button>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  {% endblock -%}

  {% block secondary %}{% endblock %}

  {%- block scripts %}
    {{ super() }}
    {% asset 'feedback/feedback-comment-js' %}
    {% if h.is_enabled_feedback_recaptcha() and (h.is_feedback_recaptcha_force_all() or not (c.userobj and (c.userobj.sysadmin or h.has_organization_admin_role(resource.package.owner_org)))) %}
    {% asset 'feedback/feedback-moral_check_log-js' %}
      <script src="https://www.google.com/recaptcha/api.js?render={{ h.get_feedback_recaptcha_publickey() }}"></script>
      <script>
        window.feedbackRecaptchaForms = [
          { name: 'comment_form', action: 'resource_comment' },
          { name: 'reply_form', action: 'resource_comment_reply' }
        ];
        window.feedbackRecaptchaPublickey = '{{ h.get_feedback_recaptcha_publickey() }}'
      </script>
      {% asset 'feedback/feedback-recaptcha-js'%}
    {% endif %}
  {% endblock -%}

{% endif %}