{% extends 'base.html' %}
{% block title %}{{ profile.callsign }} Profile{% endblock %}
{% block content %}
<section class="profile-page"><header class="screen-heading profile-header"><div><p class="eyebrow">USER PROFILE / {{ profile.callsign }}</p><h1>{{ profile.username }}</h1><p><span class="presence {{ 'online' if profile.online else '' }}">{{ 'ONLINE' if profile.online else 'OFFLINE' }}</span>{% if profile.is_admin %} / STATION OPERATOR{% endif %}</p>{% if profile.id==g.user.id %}<a href="{{ url_for('users.edit_profile',user_id=profile.id) }}">[ EDIT PROFILE ]</a>{% endif %}</div>{% if profile.profile_photo_filename %}<img class="profile-photo" src="{{ url_for('users.profile_photo',user_id=profile.id) }}" alt="{{ profile.username }} profile photo" width="128" height="128">{% endif %}</header>
<div class="terminal-card"><dl class="profile-data"><div><dt>CALLSIGN</dt><dd>{{ profile.callsign }}</dd></div><div><dt>TAGLINE</dt><dd>{{ profile.tagline or '—' }}</dd></div><div><dt>BIRTHDAY</dt><dd>{{ profile.birthday or '—' }}</dd></div><div><dt>GENDER</dt><dd>{{ profile.gender or '—' }}</dd></div><div><dt>MEMBER SINCE</dt><dd>{{ profile.created_at }} UTC</dd></div></dl><h2>ABOUT</h2><div class="message-body">{{ profile.about or 'No profile information supplied.' }}</div>
{% if profile.id!=g.user.id %}<div class="button-row">{% if profile.online %}<a class="button" href="{{ url_for('chat.direct',user_id=profile.id) }}">OPEN DIRECT CHAT</a>{% endif %}<a class="button secondary" href="{{ url_for('mail.compose',to=profile.id) }}">SEND PRIVATE MAIL</a>{% if g.user.is_admin %}<a class="button" href="{{ url_for('moderation.user_detail',user_id=profile.id) }}">MODERATE</a>{% endif %}</div><details><summary>Report user</summary><form method="post" action="{{ url_for('reports.create_report') }}" class="form-grid"><input type="hidden" name="csrf_token" value="{{ session.csrf_token }}"><input type="hidden" name="target_type" value="user"><input type="hidden" name="target_id" value="{{ profile.id }}"><label>Reason<input name="reason" minlength="10" maxlength="500" required></label><button>REPORT</button></form></details>{% endif %}</div>
</section>
{% if g.station.user_feeds_enabled %}
<section class="terminal-card user-feed" id="user-feed" aria-labelledby="feed-heading">
  <div class="split-heading"><div><p class="eyebrow">USER FEED / {{ profile.callsign }}</p><h2 id="feed-heading">{{ profile.username }}'s feed</h2></div>{% if selected_post %}<a href="{{ url_for('users.profile',user_id=profile.id) }}#user-feed">ALL POSTS</a>{% endif %}</div>
  {% if profile.id == g.user.id and not selected_post %}
  <form method="post" action="{{ url_for('feeds.create_post',user_id=profile.id) }}" class="form-grid feed-compose">
    <input type="hidden" name="csrf_token" value="{{ session.csrf_token }}">
    <label>Share a thought<textarea name="body" maxlength="200" rows="3" required data-feed-counter-input></textarea><small><span data-feed-counter>0</span>/200 characters</small></label>
    <button>POST TO YOUR FEED</button>
  </form>
  {% endif %}
  {% for post in feed_posts %}
  <article class="feed-post" id="feed-post-{{ post.id }}">
    <div class="feed-meta"><a href="{{ url_for('users.profile',user_id=profile.id) }}">{{ post.username }} [{{ post.callsign }}]</a><time datetime="{{ post.created_at }}">{{ post.created_at }} UTC</time></div>
    <p class="message-body">{{ post.body }}</p>
    {% if post.owner_id == g.user.id or g.user.is_admin %}<details class="moderation-actions"><summary aria-label="Post actions" title="Post actions"><span aria-hidden="true">▾</span></summary><form method="post" action="{{ url_for('feeds.delete_post',post_id=post.id) }}" data-confirm="Delete this feed post and its comments?" class="inline-form"><input type="hidden" name="csrf_token" value="{{ session.csrf_token }}"><button class="danger">{{ 'SYSOP DELETE POST' if post.owner_id != g.user.id else 'DELETE POST' }}</button></form></details>{% endif %}
    {% if post.owner_id != g.user.id %}<details><summary>Report post</summary><form method="post" action="{{ url_for('reports.create_report') }}" class="form-grid"><input type="hidden" name="csrf_token" value="{{ session.csrf_token }}"><input type="hidden" name="target_type" value="feed_post"><input type="hidden" name="target_id" value="{{ post.id }}"><label>Reason<input name="reason" minlength="10" maxlength="500" required></label><button>REPORT</button></form></details>{% endif %}
    <div class="feed-reactions" aria-label="Reactions">
      {% for kind,label in [('like','LIKE'),('heart','HEART'),('laugh','LAUGH')] %}
      <form method="post" action="{{ url_for('feeds.react',post_id=post.id) }}"><input type="hidden" name="csrf_token" value="{{ session.csrf_token }}"><input type="hidden" name="kind" value="{{ kind }}"><button class="secondary" {% if feed_reactions[post.id].chosen == kind %}aria-pressed="true"{% else %}aria-pressed="false"{% endif %}>{{ label }} {{ feed_reactions[post.id].counts.get(kind,0) }}</button></form>
      {% endfor %}
    </div>
    <div class="feed-comments"><h3>COMMENTS ({{ feed_comment_counts[post.id] }})</h3>
      {% for comment in feed_comments[post.id] %}<div class="feed-comment" id="feed-comment-{{ comment.id }}"><div class="feed-meta"><a href="{{ url_for('users.profile',user_id=comment.author_id) }}">{{ comment.username }} [{{ comment.callsign }}]</a><time datetime="{{ comment.created_at }}">{{ comment.created_at }} UTC</time></div><p class="message-body">{{ comment.body }}</p>
        {% if comment.author_id == g.user.id or g.user.is_admin %}<details class="moderation-actions"><summary aria-label="Comment actions" title="Comment actions"><span aria-hidden="true">▾</span></summary><form method="post" action="{{ url_for('feeds.delete_comment',comment_id=comment.id) }}" data-confirm="Delete this comment?" class="inline-form"><input type="hidden" name="csrf_token" value="{{ session.csrf_token }}"><button class="danger">{{ 'SYSOP DELETE COMMENT' if comment.author_id != g.user.id else 'DELETE COMMENT' }}</button></form></details>{% endif %}
        {% if comment.author_id != g.user.id %}<details><summary>Report comment</summary><form method="post" action="{{ url_for('reports.create_report') }}" class="form-grid"><input type="hidden" name="csrf_token" value="{{ session.csrf_token }}"><input type="hidden" name="target_type" value="feed_comment"><input type="hidden" name="target_id" value="{{ comment.id }}"><label>Reason<input name="reason" minlength="10" maxlength="500" required></label><button>REPORT</button></form></details>{% endif %}
      </div>{% endfor %}
      {% if not selected_post and feed_comment_counts[post.id] > 3 %}<p><a href="{{ url_for('users.profile',user_id=profile.id,post=post.id) }}#feed-post-{{ post.id }}">VIEW ALL COMMENTS</a></p>{% endif %}
      {% if selected_post %}<nav class="feed-pagination" aria-label="Comment pages">{% if comment_page > 1 %}<a href="{{ url_for('users.profile',user_id=profile.id,post=post.id,comments=comment_page-1) }}#feed-post-{{ post.id }}">NEWER COMMENTS</a>{% endif %}{% if comment_has_next %}<a href="{{ url_for('users.profile',user_id=profile.id,post=post.id,comments=comment_page+1) }}#feed-post-{{ post.id }}">OLDER COMMENTS</a>{% endif %}</nav>{% endif %}
      <form method="post" action="{{ url_for('feeds.create_comment',post_id=post.id) }}" class="form-grid feed-compose"><input type="hidden" name="csrf_token" value="{{ session.csrf_token }}"><label>Leave a comment<textarea name="body" maxlength="500" rows="2" required data-feed-counter-input></textarea><small><span data-feed-counter>0</span>/500 characters</small></label><button class="secondary">COMMENT</button></form>
    </div>
  </article>
  {% else %}<p class="muted">No posts yet.{% if profile.id == g.user.id %} Share the first thought above.{% endif %}</p>{% endfor %}
  {% if not selected_post %}<nav class="feed-pagination" aria-label="Feed pages">{% if feed_page > 1 %}<a href="{{ url_for('users.profile',user_id=profile.id,page=feed_page-1) }}#user-feed">NEWER POSTS</a>{% endif %}{% if feed_has_next %}<a href="{{ url_for('users.profile',user_id=profile.id,page=feed_page+1) }}#user-feed">OLDER POSTS</a>{% endif %}</nav>{% endif %}
</section>
{% endif %}
{% endblock %}