{% extends "base.html" %}
{% block title %}{{ tool.name }} — {{ settings.APP_NAME }}{% endblock %}
{% block content %}
<div class="tool-bar">
  <div style="display:flex;align-items:center;gap:12px">
    <a href="/" class="button-utility" aria-label="Back to dashboard">← Back</a>
    <strong style="font: var(--type-title); color: var(--ink)">{{ tool.name }}</strong>
  </div>
  <a class="button utility-open" href="{{ tool.url }}" target="_blank" rel="noopener">Open {{ tool.name }}</a>
</div>
<div class="page">
  <div class="tool-detail stack">
    <div class="linkout-card stack">
      <h2 class="section-title">{{ tool.name }}</h2>
      <p class="muted">{{ tool.description }}</p>
      <p class="faint" style="font: var(--type-caption)">This tool opens in its own tab or window.</p>
      {% if tool.login %}<p class="tag-chip tag-chip-login" style="align-self:flex-start">Signs you in itself (separate account/login)</p>{% endif %}
      {% if tool.lan %}<p class="tag-chip" style="align-self:flex-start">🔒 LAN only — reachable on your home network, not the internet</p>{% endif %}
      <a class="button button-primary" href="{{ tool.url }}" target="_blank" rel="noopener">
        Open {{ tool.name }}
      </a>
    </div>
    {% include "partials/_files.html" %}
  </div>
</div>
{% endblock %}