{% extends "base.html" %}
{% block title %}{{ item['name'] }} - {{ site_name }}{% endblock %}
{% block content %}
<nav class="crumb"><a href="/">首页</a> / {% if item['category_name'] %}<a href="/?category={{ item['category_id'] }}">{{ item['category_name'] }}</a> / {% endif %}{{ item['name'] }}</nav>

{% if msg == 'captcha' %}<div class="alert alert-error">验证码错误或已过期，请重新提交</div>
{% elif msg == 'pending' %}<div class="alert alert-ok">评论提交成功，管理员审核通过后即可显示</div>
{% elif msg == 'limit' %}<div class="alert alert-error">评论过于频繁，请稍后再试</div>
{% elif msg == 'empty' %}<div class="alert alert-error">评论内容不能为空</div>{% endif %}

<div class="detail-head">
  <div class="sw-icon sw-icon-lg">{{ item['name'][:1] }}</div>
  <div class="detail-info">
    <h1>{% if item['pin_weight'] %}<span class="pin-flag" title="置顶">顶</span>{% endif %}{{ item['name'] }}
      {% if item['recommended'] %}<span class="corner-badge inline-badge">荐</span>{% endif %}</h1>
    <div class="sw-meta">
      {% if item['version'] %}<span class="tag">版本 v{{ item['version'] }}</span>{% endif %}
      {% if item['category_name'] %}<span class="tag tag-cat">{{ item['category_name'] }}</span>{% endif %}
      {% for t in tags %}<a class="tag tag-tag" href="/?tag={{ t }}">#{{ t }}</a>{% endfor %}
      <span class="tag">{{ item['download_count'] }} 次下载</span>
      <span class="tag">{{ item['view_count'] }} 次浏览</span>
      {% if item['developer'] %}<span class="tag">开发者：{{ item['developer'] }}</span>{% endif %}
      {% if item['license_type'] %}<span class="tag tag-license">{{ item['license_type'] | license_label }}</span>{% endif %}
      <span class="tag">更新于 {{ item['updated_at'][:10] }}</span>
    </div>
    {% if item['remark'] %}<p class="remark-line">备注：{{ item['remark'] }}</p>{% endif %}
  </div>
</div>

<div class="detail-body rating-panel" id="rating-panel" data-sid="{{ item['id'] }}">
  <h2>用户评价 <span class="muted small">（共 {{ rating_total }} 条评分）</span>
    <span class="rating-download">累计下载 <strong>{{ item['download_count'] }}</strong> 次</span>
  </h2>
  <div class="rating-summary">
    {% for d in ratings %}
    <div class="rating-dim" id="rating-sum-{{ d.id }}">
      <span class="rating-name">{{ d.name }}</span>
      <span class="stars">
        {% for i in range(1, 6) %}<span class="star {% if i <= (d.avg + 0.5) | int %}on{% endif %}">★</span>{% endfor %}
      </span>
      <strong class="rating-avg">{{ '%.1f' | format(d.avg) }}</strong>
      <span class="muted small rating-count">（{{ d.count }} 人）</span>
    </div>
    {% endfor %}
  </div>
  <div class="rate-box">
    <p class="muted small">点击星星为这个软件打分（同一维度可修改，每人每维度计一次）</p>
    {% for d in ratings %}
    <div class="rate-row" data-dim="{{ d.id }}">
      <span class="rating-name">{{ d.name }}</span>
      {% for i in range(1, 6) %}
      <button class="rate-star {% if mine.get(d.id, 0) >= i %}on{% endif %}" type="button"
              data-dim="{{ d.id }}" data-score="{{ i }}" title="{{ i }} 星">★</button>
      {% endfor %}
      <span class="rate-hint muted small">
        {% if mine.get(d.id) %}我的评分：{{ mine[d.id] }} 星{% else %}点击星星评分{% endif %}
      </span>
    </div>
    {% endfor %}
  </div>
</div>

<div class="detail-body">
  <h2>下载（{{ files | length }} 个文件）</h2>
  <div class="file-list">
    {% for f in files %}
    <div class="file-row">
      <div class="file-info">
        <strong>{{ f['label'] }}</strong>
        <span class="muted small">{{ f['original_name'] }} · {% if f['source_type'] == 'link' %}外部链接{% else %}{{ f['file_size'] | human_size }}{% endif %} · 已下载 {{ f['download_count'] }} 次</span>
      </div>
      <a class="btn btn-primary" href="/download/{{ f['id'] }}">
        <svg viewBox="0 0 24 24"><path d="M12 3v12m0 0l-5-5m5 5l5-5M4 21h16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
        下载
      </a>
    </div>
    {% else %}<p class="muted">暂无可下载文件</p>{% endfor %}
  </div>
</div>

<div class="detail-body">
  <h2>软件使用说明</h2>
  <div class="md-content">
    {% if desc_html %}{{ desc_html | safe }}{% else %}<p class="muted">管理员还没有填写使用说明。</p>{% endif %}
  </div>
</div>

<div class="detail-body">
  <h2>用户评论 <span class="muted small">（{{ comment_count }} 条已审核通过）</span></h2>
  <div class="comment-list">
    {% for node in comment_tree %}
    <div class="comment-item">
      <div class="comment-head">
        <strong>{{ node['c']['nickname'] }}</strong>
        {% if node['c']['is_admin'] %}<span class="admin-badge">管理员</span>{% endif %}
        <span class="muted small">{{ node['c']['created_at'] }}</span>
        {% if allow_comment %}<a href="javascript:;" class="reply-link small" data-reply="{{ node['c']['id'] }}" data-nick="{{ node['c']['nickname'] }}">回复</a>{% endif %}
      </div>
      <div class="comment-body">{{ node['c']['content'] | comment_html | safe }}</div>
      {% if node['replies'] %}
      <div class="comment-replies">
        {% for r in node['replies'] %}
        <div class="comment-item comment-reply">
          <div class="comment-head">
            <strong>{{ r['nickname'] }}</strong>
            {% if r['is_admin'] %}<span class="admin-badge">管理员</span>{% endif %}
            <span class="muted small">{{ r['created_at'] }}</span>
            {% if allow_comment %}<a href="javascript:;" class="reply-link small" data-reply="{{ r['id'] }}" data-nick="{{ r['nickname'] }}">回复</a>{% endif %}
          </div>
          <div class="comment-body">{{ r['content'] | comment_html | safe }}</div>
        </div>
        {% endfor %}
      </div>
      {% endif %}
    </div>
    {% else %}<p class="muted">还没有评论，来抢沙发～</p>{% endfor %}
  </div>

  {% if allow_comment %}
  <form class="comment-form" method="post" action="/software/{{ item['id'] }}/comment" id="comment-form">
    <div class="reply-hint" id="reply-hint" hidden>
      <span id="reply-hint-text"></span>
      <a href="javascript:;" id="reply-cancel">取消回复</a>
    </div>
    <input type="hidden" name="parent_id" id="parent_id" value="">
    <div class="form-row">
      <label>昵称（可选）<input type="text" name="nickname" maxlength="32" placeholder="匿名网友"></label>
    </div>
    <label>评论内容
      <textarea name="content" id="comment-content" maxlength="1000" rows="3" required
                placeholder="说说这个软件的使用体验、安装问题…支持粘贴图片和表情"></textarea>
    </label>
    <div class="comment-tools">
      <button class="btn btn-ghost btn-sm" type="button" id="comment-image-btn">插入图片</button>
      <input type="file" id="comment-image-input" accept="image/png,image/jpeg,image/gif,image/webp" hidden>
      <span class="emoji-picker">
        <button class="emoji-btn" type="button">😀</button>
        <button class="emoji-btn" type="button">😄</button>
        <button class="emoji-btn" type="button">👍</button>
        <button class="emoji-btn" type="button">👏</button>
        <button class="emoji-btn" type="button">🎉</button>
        <button class="emoji-btn" type="button">❤️</button>
        <button class="emoji-btn" type="button">🔥</button>
        <button class="emoji-btn" type="button">💯</button>
      </span>
      <span class="muted small" id="comment-image-hint">可直接 Ctrl+V 粘贴截图，图片最大 5MB</span>
    </div>
    <input type="hidden" name="captcha_code" id="captcha_code">
    <button class="btn btn-primary" type="submit">提交评论</button>
    <span class="muted small">评论与回复经管理员审核后公开显示</span>
  </form>

  <div class="modal-mask" id="captcha-modal" hidden>
    <div class="modal">
      <h3>请输入图形验证码</h3>
      <img id="captcha-img" src="" alt="验证码" width="130" height="44">
      <a href="javascript:;" id="captcha-refresh" class="small">看不清？换一张</a>
      <input type="text" id="captcha-input" maxlength="4" placeholder="4 位验证码" autocomplete="off">
      <div class="modal-actions">
        <button class="btn btn-ghost" type="button" id="captcha-cancel">取消</button>
        <button class="btn btn-primary" type="button" id="captcha-ok">确认提交</button>
      </div>
    </div>
  </div>
  {% endif %}
</div>
{% endblock %}