{% extends "base.j2" %}

{% block content %}
  <h1>Comments for {{ shop.name }}</h1>

  <div class="comment-filter-tabs">
    <a href="/s/{{ shop.id }}/comments?filter=all"
       class="mps-button{% if filter_type == 'all' %} active{% endif %}">All</a>
    <a href="/s/{{ shop.id }}/comments?filter=pending"
       class="mps-button{% if filter_type == 'pending' %} active{% endif %}">Pending</a>
    <a href="/s/{{ shop.id }}/comments?filter=deleted"
       class="mps-button{% if filter_type == 'deleted' %} active{% endif %}">Deleted</a>
  </div>

  {% if comments %}
  <table>
    <thead>
      <tr>
        <th>Product</th>
        <th>Author</th>
        <th>Comment</th>
        <th>Tone</th>
        <th class="hide-on-mobile">Date</th>
        <th>Status</th>
        <th>Actions</th>
      </tr>
    </thead>
    <tbody>
      {% for comment in comments %}
      <tr>
        <td><a href="{{ comment.product.absolute_url(request) }}">{{ comment.product.title | truncate(30) }}</a></td>
        <td>{{ comment.user.name if comment.user else "Anonymous" }}</td>
        <td>{{ comment.data | truncate(80) }}</td>
        <td>{{ comment.sentiment_icon }}</td>
        <td class="hide-on-mobile">{{ comment.ago_string }}</td>
        <td>
          {% if comment.disabled %}
            <span class="comment-status comment-deleted">[Deleted]</span>
          {% elif not comment.approved %}
            <span class="comment-status comment-pending">[Pending]</span>
          {% else %}
            <span class="comment-status comment-approved">[Approved]</span>
          {% endif %}
        </td>
        <td class="comment-dashboard-actions">
          {% if comment.disabled %}
            <form method="post" action="/comments/{{ comment.id }}/undelete" style="display:inline;">
              <input type="hidden" name="next" value="/s/{{ shop.id }}/comments?filter={{ filter_type }}" />
              <input type="submit" value="Restore" class="moderate-link" />
            </form>
          {% else %}
            {% if comment.approved %}
              <form method="post" action="/comments/{{ comment.id }}/unapprove" style="display:inline;">
                <input type="hidden" name="next" value="/s/{{ shop.id }}/comments?filter={{ filter_type }}" />
                <input type="submit" value="Unapprove" class="moderate-link" />
              </form>
            {% else %}
              <form method="post" action="/comments/{{ comment.id }}/approve" style="display:inline;">
                <input type="hidden" name="next" value="/s/{{ shop.id }}/comments?filter={{ filter_type }}" />
                <input type="submit" value="Approve" class="moderate-link" />
              </form>
            {% endif %}

            <form method="post" action="/comments/{{ comment.id }}/delete" style="display:inline;">
              <input type="hidden" name="next" value="/s/{{ shop.id }}/comments?filter={{ filter_type }}" />
              <input type="submit" value="Delete" class="delete-link" onclick="return confirm('Delete this comment?')" />
            </form>

            <a href="/comments/{{ comment.id }}/edit" class="edit-link">Edit</a>
          {% endif %}
        </td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
  {% else %}
    <p>No {{ filter_type }} comments found.</p>
  {% endif %}
{% endblock %}
