{% extends "closedverse_main/layout.html" %}
{% load closedverse_tags %}{% load closedverse_community %}{% block main-body %}
<div class="main-column">

<div class="post-list-outline">
  <a class="post-permalink-button info-ticker" href="{% url "main:post-view" comment.original_post.id %}">
	<span class="icon-container"><img src="{% avatar comment.original_post.creator comment.original_post.feeling %}" class="icon"></span>
    <span>View <span class="post-user-description" {% if comment.original_post.creator.color %}style=color:{{ comment.original_post.creator.color }}{% endif %}>{{ comment.original_post.creator.nickname }}'s post ({{ comment.original_post.trun|truncatechars:35 }})</span> for this comment.</span>
  </a>
</div>
<div class="post-list-outline more">
  <div id="post-content" class="post reply-permalink-post">
    <div class="other">
      <p class="community-container"><a {% if comment.community.clickable %}href="{% url "main:community-view" comment.community.id %}"{% endif %}><img src="{{ comment.community.icon }}" class="community-icon">{{ comment.community.name }}</a></p>
	    {% if comment.is_mine or comment.can_rm %}
		{% if user.is_active %}
		<div class="edit-buttons-content">
				<button type="button" class="symbol button edit-button rm-post-button" data-action="{% url "main:comment-rm" comment.id %}"><span class="symbol-label">Delete</span></button>
			{% if comment.is_mine and not comment.has_edit %}
			<button type="button" class="symbol button edit-button edit-post-button"><span class="symbol-label">Edit</span></button>
		{% endif %}
		</div>
	{% endif %}
	{% endif %}
	  
      <div class="user-content">
        {% user_icon_container comment.creator comment.feeling %}
        <div class="user-name-content">
          <p class="user-name"><a {% if comment.creator.color %}style=color:{{ comment.creator.color }}{% endif %} href="{% url "main:user-view" comment.creator.username %}">{{ comment.creator.nickname }}</a></p>
          {% if not comment.creator.is_active %}
		  <p style="color: #f00;">Banned</p>
		  {% endif %}
		  <p class="timestamp-container">
            <span class="spoiler-status{% if comment.spoils %} spoiler{% endif %}">Spoilers ·</span>
            <span class="timestamp">{% time comment.created %}</span>     
				{% if comment.drawing %}
				<span class="spoiler">(handwritten)</span>
				{% endif %}			
				{% if comment.has_edit %}
		· <span class="spoiler">Edited ({% time comment.edited %})</span>
				{% endif %}</p>
        </div>
      </div>
      <div class="body">
	  	{% if comment.is_mine %}
		<div id="post-edit" class="none">
			<form data-action="{% url "main:comment-change" comment.id %}" id="edit-form" method="post">
			{% feeling_selector comment.feeling %}
			<div class="textarea-container">
				<textarea name="body" class="textarea-text textarea " maxlength="2200" placeholder="Edit your comment." data-required="">{{ comment.body }}</textarea>
			</div>
				<div class="post-form-footer-options">
					<label class="spoiler-button symbol"><input id="is_spoiler" name="is_spoiler" type="checkbox" value="1"{% if comment.spoils %} checked{% endif %}>Spoilers</label>
				</div>
				<div class="form-buttons">
					<button type="button" class="cancel-button gray-button">Cancel</button>
					<button type="submit" class="post-button black-button">Submit</button>
				</div>
			</form>
		</div>
		{% endif %}
	  	<div id="the-post">
			<p class="reply-content-text">{{ comment.body|linebreaksbr }}</p>
		{% if comment.file %}
			{% if comment.file_type == 1 %}<div class="screenshot-container still-image"><img src="{{ comment.file.url }}"></div>
			{% elif comment.file_type == 2 %}<div class="screenshot-container video"><video controls src="{{ comment.file.url }}" style="max-width:100%;max-height: 450px;"></video></div>
			{% elif comment.file_type == 3 %}<div class="screenshot-container audio"><audio controls src="{{ comment.file.url }}"></audio></div>
			{% elif comment.file_type == 0 %}<a class="button download-confirm" href="{{ comment.file.url }}">Download {{ comment.file }}</a>
			{% endif %}
		{% endif %}
        <div class="post-meta">
		<button type="button"{% if not comment.can_yeah %} disabled{% endif %} class="symbol submit yeah-button
		  {% if comment.has_yeah %}empathy-added{% endif %}
		  " data-feeling="" data-action="{% url "main:comment-add-yeah" comment.id %}" data-url-id="{{ comment.id }}"><span class="yeah-button-text">{% empathy_txt comment.feeling comment.has_yeah %}</span></button>
          <div class="empathy symbol"><span class="symbol-label">Yeahs</span><span class="empathy-count">{{ comment.number_yeahs }}</span></div>
        </div>
		</div>
        {% empathy_content yeahs request comment.has_yeah %}

		
      </div>
    </div>
  </div>
  
  
</div>
</div>
{% endblock %}