{% extends 'repository/repo_layout.html' %}

{% block title %}Security - {{ repo_owner }}/{{ repo_name }} - {{ brand_name }}{% endblock %}

{% block extra_head %}
<style>
    /* Blur only — drop backdrop saturate(180%) so cards match the rest of the repo UI */
    #repo-security-overview .glass-modal {
        backdrop-filter: blur(var(--glass-blur));
        -webkit-backdrop-filter: blur(var(--glass-blur));
    }
</style>
{% endblock %}

{% block repo_content %}
<div id="repo-security-overview" class="flex flex-col space-y-8">

    <div class="flex flex-col md:flex-row md:items-center justify-between border-b border-white/5 pb-6 gap-6">
        <div>
            <h1 class="text-2xl md:text-3xl font-bold text-white tracking-tight flex items-center gap-3">
                <i data-lucide="shield-check" class="h-6 w-6 md:h-8 md:w-8 text-zinc-400"></i>
                Security Overview
            </h1>
            <p class="text-zinc-500 mt-1 max-w-2xl text-sm">
                Advanced security insights to keep your codebase secure and protect against vulnerabilities, leaked
                secrets, and compromised dependencies.
            </p>
        </div>
        <div class="flex flex-wrap items-center gap-3 flex-shrink-0">
            {% if g.user and g.user.is_admin %}
            <form action="{{ url_for('git.security_rescan', repo_owner=repo_owner, repo_name=repo_name) }}"
                method="POST" class="inline">
                <button type="submit"
                    class="group flex items-center gap-2 px-4 py-2 rounded-xl glass-button no-hover-lift text-zinc-300 hover:text-white border border-white/10 transition-colors duration-300">
                    <i data-lucide="refresh-cw"
                        class="w-4 h-4 group-hover:rotate-180 transition-transform duration-500"></i>
                    <span class="text-xs font-bold uppercase tracking-wider">Rescan Project</span>
                </button>
            </form>
            {% endif %}

            <span
                class="inline-flex items-center gap-2 rounded-xl bg-white/5 px-4 py-2 text-sm font-bold text-zinc-400 border border-white/10">
                <span class="h-2 w-2 rounded-full animate-pulse shrink-0"
                    style="background-color: rgb(var(--theme-r), var(--theme-g), var(--theme-b));"></span>
                Scan Complete
            </span>
        </div>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">

        {# --- Dependency Scanning --- #}
        <div
            class="glass-modal p-6 rounded-2xl border border-white/5 bg-gradient-to-br from-black/40 to-transparent flex flex-col relative overflow-hidden transition-all duration-300 hover:border-white/10 hover:bg-white/[0.02] col-span-1 md:col-span-2">
            <div class="flex items-center gap-3 mb-4 relative z-10">
                <div
                    class="h-10 w-10 flex items-center justify-center rounded-xl bg-blue-500/10 border border-blue-500/20 text-blue-400">
                    <i data-lucide="package" class="h-5 w-5"></i>
                </div>
                <div>
                    <h3 class="font-bold text-white text-lg tracking-tight">Dependency Scanning</h3>
                    <p class="text-xs text-zinc-500 uppercase tracking-widest font-black">CVE Lookup</p>
                </div>
            </div>
            <div class="flex-1 relative z-10 space-y-3">
                {% if dependencies %}
                {% for dep in dependencies %}
                <div class="flex items-center justify-between p-3 rounded-xl border border-white/5 bg-white/[0.02] transition-colors duration-300 hover:border-white/10 hover:bg-white/[0.04]">
                    <div class="flex items-center gap-2">
                        <i data-lucide="file-json" class="h-4 w-4 text-zinc-400"></i>
                        <span class="text-sm font-medium text-zinc-300">{{ dep.file }}</span>
                    </div>
                    <span class="text-xs text-zinc-400 font-bold bg-white/5 px-2 py-1 rounded-md border border-white/5">Vetted</span>
                </div>
                {% endfor %}
                {% else %}
                <div
                    class="flex flex-col items-center justify-center h-full py-6 text-zinc-500 bg-white/[0.01] rounded-xl border border-white/[0.02]">
                    <i data-lucide="check-circle" class="h-6 w-6 text-zinc-500 mb-2"></i>
                    <span class="text-sm text-zinc-400">No vulnerable packages found.</span>
                </div>
                {% endif %}
            </div>
        </div>

        {# --- Secret Scanning --- #}
        <div
            class="glass-modal p-6 rounded-2xl border border-white/5 bg-gradient-to-br from-black/40 to-transparent col-span-1 md:col-span-2 flex flex-col relative overflow-hidden transition-all duration-300 hover:border-white/10 hover:bg-white/[0.02]">
            <div class="flex items-center gap-3 mb-4 relative z-10">
                <div
                    class="h-10 w-10 flex items-center justify-center rounded-xl bg-blue-500/10 border border-blue-500/20 text-blue-400">
                    <i data-lucide="key" class="h-5 w-5"></i>
                </div>
                <div>
                    <h3 class="font-bold text-white text-lg tracking-tight">Secret Scanning</h3>
                    <p class="text-xs text-zinc-500 uppercase tracking-widest font-black">Tokens & API Keys</p>
                </div>
            </div>
            <div class="flex-1 relative z-10">
                {% set secret_alerts = alerts|selectattr("type", "equalto", "secret")|list %}
                {% if secret_alerts %}
                <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
                    {% for alert in secret_alerts %}
                    <div
                        class="flex flex-col p-4 rounded-xl border border-red-500/20 bg-red-500/10 relative overflow-hidden transition-colors duration-300 hover:bg-red-500/[0.12]">
                        <div class="absolute left-0 top-0 bottom-0 w-1 bg-red-500 rounded-l-xl">
                        </div>
                        <div class="flex items-center justify-between mb-2 pl-2">
                            <span
                                class="text-xs font-mono text-red-300 break-all bg-red-950/50 px-2 py-0.5 rounded border border-red-500/10 flex items-center gap-1.5"><i
                                    data-lucide="file-warning" class="w-3 h-3"></i> {{ alert.file }}:{{ alert.line
                                }}</span>
                            <span class="h-2.5 w-2.5 rounded-full bg-red-500 shrink-0 border border-red-400/40" title="Alert"></span>
                        </div>
                        <span class="text-sm font-bold text-red-400 pl-2">{{ alert.description }}</span>
                    </div>
                    {% endfor %}
                </div>
                {% else %}
                <div
                    class="flex flex-col items-center justify-center h-full py-8 text-zinc-500 bg-white/[0.01] rounded-xl border border-white/[0.02]">
                    <div
                        class="h-12 w-12 rounded-full border border-white/10 bg-white/5 flex items-center justify-center mb-3">
                        <i data-lucide="shield-check" class="h-6 w-6 text-zinc-400"></i>
                    </div>
                    <span class="text-sm font-bold text-zinc-400">No secrets exposed.</span>
                </div>
                {% endif %}
            </div>
        </div>

        {# --- Security Policies --- #}
        <div
            class="glass-modal p-6 rounded-2xl border border-white/5 bg-gradient-to-br from-black/40 to-transparent col-span-1 md:col-span-2 flex flex-col relative overflow-hidden transition-all duration-300 hover:border-white/10 hover:bg-white/[0.02]">
            <div class="flex items-center gap-3 mb-4 relative z-10">
                <div
                    class="h-10 w-10 flex items-center justify-center rounded-xl bg-blue-500/10 border border-blue-500/20 text-blue-400">
                    <i data-lucide="book-open" class="h-5 w-5"></i>
                </div>
                <div>
                    <h3 class="font-bold text-white text-lg tracking-tight">Security Policies</h3>
                    <p class="text-xs text-zinc-500 uppercase tracking-widest font-black">Guidelines & Reporting</p>
                </div>
            </div>
            <div class="relative z-10 w-full">
                {% if security_md %}
                <div class="p-6 md:p-8 rounded-2xl bg-black/40 border border-white/5">
                    <article id="rendered-security-md" class="markdown-body max-w-none"></article>
                </div>
                {% else %}
                <div
                    class="flex flex-col items-center justify-center py-12 text-zinc-500 bg-white/[0.02] rounded-xl border border-white/5 border-dashed">
                    <i data-lucide="file-question" class="h-8 w-8 mb-3 text-blue-400 opacity-70"></i>
                    <h4 class="font-bold text-zinc-400 mb-1">No SECURITY.md found</h4>
                    <p class="text-xs max-w-sm text-center">Add a SECURITY.md file to the root of your repository to
                        provide instructions on how to report security vulnerabilities.</p>
                    {% if can_write %}
                    <a href="{{ url_for('git.view_repository', repo_owner=repo_owner, repo_name=repo_name) }}"
                        class="mt-4 px-4 py-2 bg-white/10 hover:bg-white/15 text-white text-xs font-bold rounded-lg transition-colors border border-white/10">Add
                        Policy</a>
                    {% endif %}
                </div>
                {% endif %}
            </div>
        </div>

    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
    (function () {
        const targetEl = document.getElementById('rendered-security-md');
        const content = {{ security_md | default ('') | tojson | safe
    }};
    if (targetEl && window.marked && content) {
        targetEl.innerHTML = marked.parse(content);
    }
    }) ();
</script>
{% endblock %}