{% extends "base.html" %}

{% block content %}
<div class="row g-5">
    <!-- Search Section -->
    <div class="col-lg-7">
        <div class="dashboard-card mb-4 border-0 p-0" style="background: transparent;">
            <h1 class="fw-bold mb-3 display-5 lh-1">OSINT_CORE_SYSTEM</h1>
            <p class="text-muted fs-5 mb-5">Enterprise-grade intelligence gathering and forensic lead enrichment. Unified data extraction from 20+ sources.</p>
        </div>

        <div class="dashboard-card mb-5">
            <h2 class="fs-5 mb-4 fw-bold">INITIATE_SEARCH</h2>
            <form action="{% url 'index' %}" method="post">
                {% csrf_token %}
                <div class="row g-3">
                    <div class="col-md-4">
                        <select name="scan_type" class="form-select search-input">
                            <option value="phone">PHONE_NUMBER</option>
                            <option value="email">EMAIL_ADDRESS</option>
                            <option value="name">PERSON_NAME</option>
                            <option value="username">USERNAME</option>
                            <option value="ip">IP_ADDRESS</option>
                        </select>
                    </div>
                    <div class="col-md-8">
                        <input type="text" name="query" class="form-control search-input" placeholder="ENTER TARGET VALUE (e.g. +1... or user@...)" required>
                    </div>
                    <div class="col-12 mt-4 text-end">
                        <button type="submit" class="btn btn-osint">EXECUTE_SCAN</button>
                    </div>
                </div>
            </form>
        </div>

        <div class="row g-4 mt-1">
            <div class="col-md-4">
                <div class="dashboard-card text-center p-3 h-100">
                    <div class="fs-4 text-accent mb-2 fw-bold">{{ recent_scans.count }}</div>
                    <div class="text-muted small">TOTAL_INVESTIGATIONS</div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="dashboard-card text-center p-3 h-100">
                    <div class="fs-4 text-info mb-2 fw-bold">14</div>
                    <div class="text-muted small">ACTIVE_MODULES</div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="dashboard-card text-center p-3 h-100">
                    <div class="fs-4 text-success mb-2 fw-bold">LIVE</div>
                    <div class="text-muted small">SYSTEM_STATUS</div>
                </div>
            </div>
        </div>
    </div>

    <!-- History / Side Section -->
    <div class="col-lg-5">
        <div class="dashboard-card h-100">
            <h2 class="fs-5 mb-4 fw-bold d-flex justify-content-between align-items-center">
                RECENT_SCANS
                <span class="badge bg-secondary">HIST_LOG</span>
            </h2>

            <div class="history-list">
                {% for scan in recent_scans %}
                    <div class="history-item d-flex justify-content-between align-items-center">
                        <div class="d-flex align-items-center gap-3">
                            <div class="rounded-circle p-2 bg-dark border border-secondary" style="width: 40px; height: 40px; display: grid; place-items: center;">
                                <span class="small fw-bold">{{ scan.target_type|slice:":1"|upper }}</span>
                            </div>
                            <div>
                                <a href="{% url 'scan_detail' scan.pk %}" class="text-white text-decoration-none fw-semibold d-block">
                                    {{ scan.target_value|truncatechars:20 }}
                                </a>
                                <span class="text-muted extra-small" style="font-size: 0.75rem;">{{ scan.created_at|timesince }} ago</span>
                            </div>
                        </div>
                        <div class="text-end">
                            <span class="risk-badge {% if scan.risk_score > 50 %}risk-high{% else %}risk-low{% endif %}">
                                RS:{{ scan.risk_score }}
                            </span>
                        </div>
                    </div>
                {% empty %}
                    <div class="text-center py-5 text-muted">
                        <div class="mb-3">NO_DATA_FOUND</div>
                        <p class="small">INITIATE A SCAN TO BEGIN LOGGING</p>
                    </div>
                {% endfor %}
            </div>

            {% if recent_scans %}
            <div class="mt-4 text-center">
                <a href="#" class="btn btn-sm btn-outline-secondary w-100 text-uppercase letter-spacing-1 fw-bold py-2">LOAD_FULL_ARCHIVE</a>
            </div>
            {% endif %}
        </div>
    </div>
</div>
{% endblock %}