{% extends "ewoooc_base.html" %}
{% block title %}{{ tool.title }} - EwoooC{% endblock %}

{% block extra_css %}
  <link rel="stylesheet" href="{{ url_for('static', filename='css/page-external-tools.css') }}">
{% endblock %}

{% block ewooo_content %}
<main class="external-tool-page" data-screen-label="{{ tool.key }}">
  <section class="external-tool-hero">
    <div>
      <div class="external-tool-eyebrow">
        <i class="fas fa-plug-circle-check" aria-hidden="true"></i>
        {{ tool.eyebrow }}
      </div>
      <h1>{{ tool.title }}</h1>
      <p>{{ tool.summary }}</p>
    </div>
    <span class="external-tool-status">{{ tool.status_label }}</span>
  </section>

  <section class="external-tool-checks" aria-label="入口檢查">
    {% for check in tool.checks %}
    <article class="external-tool-check is-{{ check.state }}">
      <span>{{ check.label }}</span>
      <strong>{{ check.value }}</strong>
    </article>
    {% endfor %}
  </section>

  <section class="external-tool-panel">
    <div class="external-tool-panel__body">
      <span class="external-tool-kicker">路由狀態</span>
      <h2>先回正式工作流</h2>
      <p>目前先使用下方正式入口，避免決策資料分散。</p>
      <dl class="external-tool-diagnostics">
        <div>
          <dt>正式導覽</dt>
          <dd>/{{ tool.key }}</dd>
        </div>
        <div>
          <dt>目前設定</dt>
          <dd>{{ tool.configured_label }}</dd>
        </div>
        <div>
          <dt>版本</dt>
          <dd>{{ system_version }}</dd>
        </div>
      </dl>
    </div>
    <div class="external-tool-panel__actions">
      {% if tool.launch_href %}
      <a class="btn btn-primary" href="{{ tool.launch_href }}">
        <i class="fas fa-arrow-up-right-from-square" aria-hidden="true"></i>{{ tool.launch_label }}
      </a>
      {% endif %}
      <a class="btn btn-outline-primary" href="/monthly_summary_analysis">
        <i class="fas fa-arrow-left" aria-hidden="true"></i>回分析報表
      </a>
    </div>
  </section>

  {% if tool.key == 'webcrumbs' and tool.plugin_previews %}
  <script>
    window.StockPlatformSharedUI = window.StockPlatformSharedUI || {};
    window.StockPlatformSharedUI.allowedPluginUris = {{ tool.plugin_preview_uris | tojson }};
    window.StockPlatformSharedUI.pluginSeedData = {{ tool.plugin_seed_data | tojson }};
    window.StockPlatformSharedUI.marketSnapshot = window.StockPlatformSharedUI.pluginSeedData.marketSnapshot || [];
    window.StockPlatformSharedUI.aiCandidate = window.StockPlatformSharedUI.pluginSeedData.aiCandidate || {};
  </script>
  <section class="external-tool-webcrumbs-preview" aria-label="Webcrumbs live preview">
    <div class="external-tool-section-title">
      <span class="external-tool-kicker">共用預覽</span>
      <h2>共用 UI 預覽</h2>
    </div>
    <div class="external-tool-webcrumbs-grid">
      {% for preview in tool.plugin_previews %}
      <div class="external-tool-webcrumbs-plugin" data-plugin-uri="{{ preview.uri }}">
        <stock-platform-plugin uri="{{ preview.uri }}"></stock-platform-plugin>
      </div>
      {% endfor %}
    </div>
  </section>
  {% endif %}

  <section class="external-tool-actions" aria-label="可用替代入口">
    <div class="external-tool-section-title">
      <span class="external-tool-kicker">可用入口</span>
      <h2>可用正式入口</h2>
    </div>
    <div class="external-tool-action-grid">
      {% for action in tool.actions %}
      <a class="external-tool-action" href="{{ action.href }}">
        <i class="{{ action.icon }}" aria-hidden="true"></i>
        <span>{{ action.label }}</span>
      </a>
      {% endfor %}
    </div>
  </section>
</main>
{% endblock %}