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

{% block title %}可用模型 - cmhub{% endblock %}

{% block content %}
  <div class="d-flex align-items-center justify-content-between gap-3 mb-4">
    <h1 class="h3 mb-0">可用模型</h1>
    <a class="btn btn-sm btn-outline-secondary" href="{% url 'portal-apikeys' %}">API Key</a>
  </div>

  <div class="cmhub-surface">
    {% if models %}
      <div class="table-responsive">
        <table class="table align-middle mb-0">
          <thead>
            <tr>
              <th scope="col">别名</th>
              <th scope="col">类型</th>
              <th scope="col">能力</th>
              <th scope="col">原图</th>
              <th scope="col">价格</th>
            </tr>
          </thead>
          <tbody>
            {% for item in models %}
              <tr>
                <td><code>{{ item.alias }}</code></td>
                <td>
                  {% if item.operation_type == "title" %}
                    生成标题
                  {% elif item.operation_type == "image" %}
                    生成图片
                  {% else %}
                    {{ item.operation_type }}
                  {% endif %}
                </td>
                <td>
                  {% for capability in item.capabilities %}
                    <span class="badge text-bg-light border">{{ capability }}</span>
                  {% empty %}
                    <span class="text-muted">无</span>
                  {% endfor %}
                </td>
                <td>
                  {% if item.requires_image %}
                    <span class="badge text-bg-warning">需要</span>
                  {% else %}
                    <span class="badge text-bg-light border">不需要</span>
                  {% endif %}
                </td>
                <td>
                  {% if item.prices %}
                    <div class="d-flex flex-wrap gap-2">
                      {% for price in item.prices %}
                        <span class="badge text-bg-light border">
                          {% if price.resolution == "default" %}默认{% else %}{{ price.resolution }}{% endif %}：{{ price.points_cost }} 点
                        </span>
                      {% endfor %}
                    </div>
                  {% else %}
                    <span class="badge text-bg-secondary">暂未定价</span>
                  {% endif %}
                </td>
              </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    {% else %}
      <p class="text-muted mb-0">暂无可用模型</p>
    {% endif %}
  </div>
{% endblock %}