{% extends "base.htm" %}

{% block title %}NanoShare - {{ file_name }}{% endblock %}

{% block meta %}
  <meta name="robots" content="noindex, nofollow" />
{% endblock %}

{% block head %}
<style>
  .text-view-page { padding: clamp(16px, 3vw, 28px); }
  .text-view-head { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; justify-content: space-between; }
  .text-view-body {
    margin: 16px 0 0;
    padding: clamp(12px, 2vw, 18px);
    border: 1px solid var(--border);
    border-radius: 12px;
    background: rgba(0, 0, 0, .16);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: .95rem;
    line-height: 1.6;
    white-space: pre-wrap;
    word-break: break-word;
  }
  .text-view-body a { color: var(--accent, #6cf); }
  .text-view-ref { display: inline-flex; align-items: center; gap: 6px; vertical-align: middle; }
  .text-view-ref img {
    max-height: 120px;
    max-width: 180px;
    border-radius: 6px;
    border: 1px solid var(--border);
    vertical-align: middle;
  }
  .text-view-state { color: var(--muted); font-size: .85rem; }
</style>
{% endblock %}

{% block content %}
<main class="text-view-page">
  <section class="card" style="padding: clamp(18px, 2.6vw, 28px);">
    <div class="text-view-head">
      <h1 class="page-title" style="margin:0;">{{ file_name }}</h1>
      <a class="btn btn-ghost" href="{{ raw_url }}">View raw</a>
    </div>

    <div class="text-view-body">{% for segment in segments -%}
{%- if segment.kind == 'text' -%}
{{ segment.text }}
{%- elif segment.kind == 'file' -%}
<span class="text-view-ref"><a href="{{ segment.url }}" rel="noopener noreferrer">{{ segment.label }}</a>{% if segment.media == 'image' %} <a href="{{ segment.url }}" rel="noopener noreferrer"><img src="{{ segment.url }}" alt="{{ segment.label }}" loading="lazy"></a>{% endif %}</span>
{%- else -%}
<a href="{{ segment.url }}" rel="noopener noreferrer" target="_blank">{{ segment.label or segment.url }}</a>{% if segment.state == 'expired' %} <span class="text-view-state">(expired)</span>{% endif %}
{%- endif -%}
{%- endfor %}</div>
  </section>
</main>
{% endblock %}