{% extends "base.html" %}

{% block title %}ATT&CK — Tsume{% endblock %}

{% block content %}
<div class="page-header">
  <div>
    <h1>MITRE ATT&amp;CK</h1>
    <p>Search techniques by ID, or groups/software by name — same local dataset as <span class="mono">tsume attack</span></p>
  </div>
</div>

<div class="panel">
  <div class="panel__body">
    <form method="get" action="/attack" class="field-row">
      <div class="field" style="flex: 1;">
        <label for="query">Technique ID or group/software name</label>
        <input class="mono" type="text" id="query" name="query" value="{{ query }}" placeholder="T1055.011 or Evil Corp" autofocus>
      </div>
      <div class="field">
        <button class="button button--primary" type="submit">Search</button>
      </div>
    </form>
  </div>
</div>

{% if not_downloaded %}
<div class="panel">
  <div class="empty-state">
    <h3>ATT&amp;CK data not downloaded yet</h3>
    <p>Run <span class="mono">tsume attack-update</span> from the CLI to fetch the dataset (~45MB), then search here.</p>
  </div>
</div>
{% elif no_match %}
<div class="panel">
  <div class="empty-state">
    <h3>No match for "{{ query }}"</h3>
    <p>Try a technique ID like T1055, or a group/software name like Emotet.</p>
  </div>
</div>
{% elif technique %}
<div class="panel">
  <div class="panel__header">
    <h2>{{ technique.name }}</h2>
    <span class="helper-text mono">{{ technique.attack_id }}</span>
  </div>
  <div class="panel__body">
    {% if technique.description %}
    <p>{{ technique.description.split('\n')[0] }}</p>
    {% endif %}
    {% if used_by %}
    <p class="helper-text" style="margin-top: var(--space-4);">Used by:</p>
    <div class="checkbox-group">
      {% for actor in used_by %}
      <span class="badge badge--unknown mono">{{ actor.name }} ({{ actor.attack_id }})</span>
      {% endfor %}
    </div>
    {% endif %}
    <p style="margin-top: var(--space-4);">
      <a href="https://attack.mitre.org/techniques/{{ technique.attack_id.replace('.', '/') }}" target="_blank" rel="noopener noreferrer">View on attack.mitre.org ↗</a>
    </p>
  </div>
</div>
{% elif actors %}
{% for actor, techniques in actors %}
<div class="panel">
  <div class="panel__header">
    <h2>{{ actor.name }}</h2>
    <span class="helper-text mono">{{ actor.attack_id }} · {{ actor.kind }}</span>
  </div>
  <div class="panel__body">
    {% if actor.aliases %}<p class="helper-text">aka {{ actor.aliases | join(", ") }}</p>{% endif %}
    {% if techniques %}
    <p class="helper-text" style="margin-top: var(--space-3);">Techniques ({{ techniques | length }}):</p>
    <div class="checkbox-group">
      {% for t in techniques[:15] %}
      <span class="badge badge--unknown mono">{{ t.attack_id }} {{ t.name }}</span>
      {% endfor %}
      {% if techniques | length > 15 %}
      <span class="checkbox-group-extra" hidden>
        {% for t in techniques[15:] %}
        <span class="badge badge--unknown mono">{{ t.attack_id }} {{ t.name }}</span>
        {% endfor %}
      </span>
      <button type="button" class="tag tag-button show-more-btn">+{{ techniques | length - 15 }} more</button>
      {% endif %}
    </div>
    {% endif %}
    <p style="margin-top: var(--space-4);">
      <a href="https://attack.mitre.org/{{ 'groups' if actor.kind == 'group' else 'software' }}/{{ actor.attack_id }}" target="_blank" rel="noopener noreferrer">View on attack.mitre.org ↗</a>
    </p>
  </div>
</div>
{% endfor %}
{% endif %}
{% endblock %}