{% extends "base.html" %}
{% block title %}Shadow Profiler{% endblock %}

{% block content %}
<div class="page-header">
  <div class="page-title-block">
    <h1 class="page-title glitch-text" data-text="SHADOW PROFILER">SHADOW PROFILER</h1>
    <p class="page-subtitle">People intelligence aggregation — build shadow dossiers from public records</p>
  </div>
</div>

{% if error %}
<div class="flash flash-error"><span class="flash-icon">✗</span> {{ error }}</div>
{% endif %}

<div class="intel-layout">
  <div class="intel-form-panel">
    <form action="{{ url_for('intel.person_search') }}" method="POST" id="person-form">
      <div class="form-section">
        <div class="section-header">
          <span class="section-icon neon-purple">◉</span>
          <span class="section-title">TARGET IDENTIFIERS</span>
          <span class="section-sub">Provide any combination — more = better signal</span>
        </div>
        <div class="identifier-grid">
          <div class="form-group">
            <label class="form-label">FIRST NAME</label>
            <input type="text" name="first_name" class="input-field" placeholder="John">
          </div>
          <div class="form-group">
            <label class="form-label">LAST NAME</label>
            <input type="text" name="last_name" class="input-field" placeholder="Doe">
          </div>
          <div class="form-group">
            <label class="form-label">EMAIL ADDRESS</label>
            <input type="email" name="email" class="input-field" placeholder="target@domain.com">
          </div>
          <div class="form-group">
            <label class="form-label">PHONE NUMBER</label>
            <input type="text" name="phone" class="input-field" placeholder="+1-555-000-0000">
          </div>
          <div class="form-group">
            <label class="form-label">USERNAME / HANDLE</label>
            <input type="text" name="username" class="input-field" placeholder="@handle">
          </div>
          <div class="form-group">
            <label class="form-label">ADDRESS / CITY</label>
            <input type="text" name="address" class="input-field" placeholder="New York, NY">
          </div>
        </div>
      </div>

      <!-- API selection -->
      <div class="form-section">
        <div class="section-header">
          <span class="section-icon neon-cyan">⚙</span>
          <span class="section-title">INTEL SOURCES</span>
        </div>
        <div class="api-sources-grid">
          {% for api in apis %}
          {% if 'people' in api.categories or 'email' in api.categories or 'social' in api.categories or 'breach' in api.categories %}
          <div class="api-source-row {% if api.is_configured %}enabled{% else %}disabled{% endif %}">
            <span class="api-dot {% if api.is_configured %}dot-green{% else %}dot-red{% endif %}"></span>
            <span class="api-source-name">{{ api.name }}</span>
            <span class="api-source-desc">{{ api.description[:50] }}</span>
            <span class="api-tier tier-{{ api.tier }}">{{ api.tier }}</span>
            {% if not api.is_configured %}
              <a href="{{ url_for('settings.settings_page') }}" class="mini-link">CONFIGURE</a>
            {% endif %}
          </div>
          {% endif %}
          {% endfor %}
        </div>
      </div>

      <button type="submit" class="btn btn-primary btn-glow btn-full" id="search-btn">
        <span class="btn-icon">◉</span>
        <span id="search-text">BUILD SHADOW PROFILE</span>
      </button>
    </form>
  </div>

  <div class="intel-info-panel">
    <div class="info-card">
      <div class="info-header neon-cyan">◈ WHAT IS SHADOW PROFILING?</div>
      <p>OwlScan aggregates publicly available information from multiple intelligence sources to build a comprehensive profile of an individual.</p>
      <p>Data sources include public records, breach databases, people-search services, and direct API integrations across major platforms:</p>
      <div style="display:flex;flex-wrap:wrap;gap:0.35rem;margin-top:0.6rem;">
        {% set platforms = [
          ("X / Twitter","neon-cyan"), ("Reddit","neon-pink"), ("Instagram","neon-purple"),
          ("TikTok","neon-green"), ("LinkedIn","neon-cyan"), ("YouTube","neon-pink"),
          ("GitHub","neon-green"), ("Facebook / Meta","neon-purple"),
          ("HaveIBeenPwned","neon-pink"), ("Hunter.io","neon-cyan"),
          ("FullContact","neon-green"), ("Pipl","neon-purple"),
          ("WhitePages","neon-cyan"), ("Spokeo","neon-pink"), ("Clearbit","neon-green")
        ] %}
        {% for name, color in platforms %}
        <span class="api-chip" style="font-size:0.72rem;padding:0.2rem 0.5rem;color:var(--{{ color }});">{{ name }}</span>
        {% endfor %}
      </div>
    </div>
    <div class="info-card warning-card">
      <div class="info-header neon-red">⚠ OPERATOR WARNING</div>
      <p>This tool is for <strong>authorized investigations only</strong>. Always obtain proper legal authorization before searching for information about real individuals.</p>
      <p>Misuse may violate GDPR, CCPA, FCRA, and other privacy laws.</p>
    </div>
    <div class="info-card">
      <div class="info-header neon-green">⚙ CONFIGURED SOURCES</div>
      {% set configured_count = apis|selectattr('is_configured')|list|length %}
      <div class="source-count">
        <span class="count-num neon-green">{{ configured_count }}</span>
        <span class="count-label">/ {{ apis|length }} APIs active</span>
      </div>
      <p style="font-size:0.8rem; margin-top:0.5rem;">
        <a href="{{ url_for('settings.settings_page') }}" class="neon-cyan">Configure ghost keys →</a>
        to unlock more intelligence sources.
      </p>
    </div>
  </div>
</div>
{% endblock %}

{% block scripts %}
<script>
document.getElementById('person-form').addEventListener('submit', function() {
  const btn = document.getElementById('search-btn');
  document.getElementById('search-text').textContent = 'SCANNING THE GRID...';
  btn.disabled = true;
  btn.classList.add('loading');
});
</script>
{% endblock %}