{% extends "base.html" %}

{% block title %}Patch Comparison - {{ instance.instance_id }}{% endblock %}

{% block header %}
    <h3> Patch Comparison: {{ instance.instance_id }} </h3>
    <div class="card mb-4" style="margin-top: 20px;">
        <div class="card-header d-flex justify-content-between align-items-center">
            <h5>Instance Information</h5>
            <a href="{{ url_for('view_by_instance_id',
                            log_path=instance.log_prefix ~ '/' ~ instance.run_id,
                            instance_id=instance.instance_id) }}"
                class="btn btn-primary">
                View Trajectory
            </a>
        </div>
        <div class="card-body">
            <div class="row">
                <div class="col-md-4">
                    <strong>Instance:</strong><br> {{ instance.instance_id }}
                </div>
                <div class="col-md-5">
                    <strong>Run:</strong><br> {{ instance.run_id }}
                </div>
                <div class="col-md-3">
                    <strong>API:</strong><br> {{ instance.api }}
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block content %}
<!-- Navigation buttons -->
<div class="d-flex justify-content-between mb-3">
    <a href="{{ url_for('view_patches', run_id=prev_instance.run_id, instance_id=prev_instance.instance_id) if prev_instance else '#' }}" class="btn btn-outline-primary {{ 'disabled' if not prev_instance else '' }}">
        <i class="fas fa-chevron-left"></i> Previous
    </a>
    
    <a href="{{ url_for('view_patches', run_id=next_instance.run_id, instance_id=next_instance.instance_id) if next_instance else '#' }}" class="btn btn-outline-primary {{ 'disabled' if not next_instance else '' }}">
        Next <i class="fas fa-chevron-right"></i>
    </a>
</div>

<div class="row">
    <!-- Ground Truth Column -->
    <div class="col-md-6">
        <div class="card h-100 mb-4">
            <div class="card-header bg-success text-white">
                <h5 class="mb-0">Ground Truth</h5>
                <small>
                    {% if instance.gt_num_edited_lines %}{{ instance.gt_num_edited_lines }} lines edited{% endif %}
                </small><br>
                <small>
                    {% if instance.gt_files_changed %}{{ instance.gt_files_changed }} files changed{% endif %}
                </small>
            </div>
            <div class="card-body d-flex flex-column">
                <div class="mb-3 flex-grow-1">
                    <h6>Description:</h6>
                    <div class="p-3 bg-light rounded" style="white-space: pre-wrap; font-size:small; height: 100%; min-height: 200px; overflow-y: auto;">{{ instance.gt_desc|safe }}</div>
                </div>
                
                <div class="mb-3 mt-auto">
                    <button class="btn btn-sm btn-outline-secondary w-100 collapsible" data-bs-toggle="collapse" data-bs-target="#gt-patch" aria-expanded="false">
                        <i class="fas fa-code"></i> View Patch
                    </button>
                    <div class="collapse mt-2" id="gt-patch">
                        <pre class="bg-light p-3 rounded"><code>{{ instance.gt_patch|safe }}</code></pre>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Model Patch Column -->
    <div class="col-md-6">
        <div class="card h-100 mb-4">
            <div class="card-header bg-primary text-white">
                <h5 class="mb-0">Model Patch</h5>
                <small>
                    {% if instance.patch_num_edited_lines %}{{ instance.patch_num_edited_lines }} lines edited{% endif %}
                </small><br>
                <small>
                    {% if instance.patch_files_changed %}{{ instance.patch_files_changed }} files changed{% endif %}
                </small>
            </div>
            <div class="card-body d-flex flex-column">
                <div class="mb-3 flex-grow-1">
                    <h6>Description:</h6>
                    <div class="p-3 bg-light rounded" style="white-space: pre-wrap; font-size:small; height: 100%; min-height: 200px; overflow-y: auto;">{{ instance.model_desc|safe }}</div>
                </div>
                
                <div class="mb-3 mt-auto">
                    <button class="btn btn-sm btn-outline-secondary w-100 collapsible" data-bs-toggle="collapse" data-bs-target="#model-patch" aria-expanded="false">
                        <i class="fas fa-code"></i> View Patch
                    </button>
                    <div class="collapse mt-2" id="model-patch">
                        <pre class="bg-light p-3 rounded"><code>{{ instance.model_patch|safe }}</code></pre>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="mb-3 flex-grow-1" style="margin-top: 20px;">
    <h6>Comparison:</h6>
    <div class="p-3 bg-light rounded" style="white-space: pre-wrap; font-size:small; height: 100%; min-height: 100px; overflow-y: auto;">{{ instance.comparison_desc|safe }}</div>
</div>
{% endblock %}