{% extends 'base.html' %}
{% load static %}

{% block title %}VAST Templates - Adtlas{% endblock %}

{% block extra_css %}
<!-- INTERNAL Data table css -->
<link href="{% static 'plugins/datatable/css/dataTables.bootstrap5.css' %}" rel="stylesheet" />
<link href="{% static 'plugins/datatable/responsive.bootstrap5.css' %}" rel="stylesheet" />
<link href="{% static 'plugins/datatable/css/buttons.bootstrap5.min.css' %}" rel="stylesheet">

<!-- INTERNAL Prism css -->
<link href="{% static 'plugins/prism/prism.css' %}" rel="stylesheet">
{% endblock %}

{% block content %}
<!-- PAGE-HEADER -->
<div class="page-header">
    <h1 class="page-title">VAST Templates</h1>
    <div>
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{% url 'core:dashboard' %}">Home</a></li>
            <li class="breadcrumb-item active" aria-current="page">VAST Templates</li>
        </ol>
    </div>
</div>
<!-- PAGE-HEADER END -->

<!-- ROW-1 -->
<div class="row">
    <div class="col-lg-12">
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">VAST Template Management</h3>
                <div class="card-options">
                    <a href="{% url 'vast:template_create' %}" class="btn btn-primary btn-sm">
                        <i class="fa fa-plus"></i> Add New Template
                    </a>
                    <a href="{% url 'vast:template_test' %}" class="btn btn-info btn-sm ms-2">
                        <i class="fa fa-flask"></i> Test VAST
                    </a>
                </div>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-bordered text-nowrap border-bottom" id="templates-table">
                        <thead>
                            <tr>
                                <th class="wd-20p border-bottom-0">Template Name</th>
                                <th class="wd-15p border-bottom-0">Version</th>
                                <th class="wd-15p border-bottom-0">Type</th>
                                <th class="wd-10p border-bottom-0">Status</th>
                                <th class="wd-15p border-bottom-0">Usage Count</th>
                                <th class="wd-10p border-bottom-0">Created</th>
                                <th class="wd-15p border-bottom-0">Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for template in templates %}
                            <tr>
                                <td>
                                    <div class="d-flex align-items-center">
                                        <div class="me-3">
                                            <span class="avatar avatar-md brround bg-primary">
                                                <i class="fa fa-code"></i>
                                            </span>
                                        </div>
                                        <div>
                                            <h6 class="mb-0">{{ template.name }}</h6>
                                            <small class="text-muted">{{ template.description|truncatechars:30 }}</small>
                                        </div>
                                    </div>
                                </td>
                                <td>
                                    <span class="badge bg-info">{{ template.version }}</span>
                                </td>
                                <td>
                                    {% if template.template_type == 'linear' %}
                                        <span class="badge bg-primary">Linear</span>
                                    {% elif template.template_type == 'nonlinear' %}
                                        <span class="badge bg-warning">Non-Linear</span>
                                    {% elif template.template_type == 'companion' %}
                                        <span class="badge bg-secondary">Companion</span>
                                    {% else %}
                                        <span class="badge bg-dark">{{ template.get_template_type_display }}</span>
                                    {% endif %}
                                </td>
                                <td>
                                    {% if template.is_active %}
                                        <span class="badge bg-success">Active</span>
                                    {% else %}
                                        <span class="badge bg-danger">Inactive</span>
                                    {% endif %}
                                </td>
                                <td>
                                    <span class="badge bg-secondary">{{ template.usage_count|default:0 }}</span>
                                </td>
                                <td>{{ template.created_at|date:"M d, Y" }}</td>
                                <td>
                                    <div class="btn-group" role="group">
                                        <button type="button" class="btn btn-sm btn-info" title="Preview" onclick="previewTemplate({{ template.pk }})">
                                            <i class="fa fa-eye"></i>
                                        </button>
                                        <a href="{% url 'vast:template_update' template.pk %}" class="btn btn-sm btn-warning" title="Edit">
                                            <i class="fa fa-edit"></i>
                                        </a>
                                        <button type="button" class="btn btn-sm btn-success" title="Test" onclick="testTemplate({{ template.pk }})">
                                            <i class="fa fa-play"></i>
                                        </button>
                                        <button type="button" class="btn btn-sm btn-secondary" title="Duplicate" onclick="duplicateTemplate({{ template.pk }})">
                                            <i class="fa fa-copy"></i>
                                        </button>
                                        <button type="button" class="btn btn-sm btn-danger" title="Delete" onclick="deleteTemplate({{ template.pk }})">
                                            <i class="fa fa-trash"></i>
                                        </button>
                                    </div>
                                </td>
                            </tr>
                            {% empty %}
                            <tr>
                                <td colspan="7" class="text-center">No VAST templates found</td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- ROW-1 END -->

<!-- ROW-2 - Template Statistics -->
<div class="row">
    <div class="col-lg-3 col-md-6">
        <div class="card">
            <div class="card-body">
                <div class="d-flex">
                    <div class="mt-2">
                        <h6 class="">Total Templates</h6>
                        <h2 class="mb-0 number-font">{{ total_templates|default:0 }}</h2>
                    </div>
                    <div class="ms-auto">
                        <div class="chart-wrapper mt-1">
                            <i class="fa fa-code fa-3x text-primary"></i>
                        </div>
                    </div>
                </div>
                <span class="text-muted fs-12"><span class="text-secondary"><i class="fe fe-arrow-up-circle text-secondary"></i> 2.1%</span> last month</span>
            </div>
        </div>
    </div>
    <div class="col-lg-3 col-md-6">
        <div class="card">
            <div class="card-body">
                <div class="d-flex">
                    <div class="mt-2">
                        <h6 class="">Active Templates</h6>
                        <h2 class="mb-0 number-font">{{ active_templates|default:0 }}</h2>
                    </div>
                    <div class="ms-auto">
                        <div class="chart-wrapper mt-1">
                            <i class="fa fa-check-circle fa-3x text-success"></i>
                        </div>
                    </div>
                </div>
                <span class="text-muted fs-12"><span class="text-green"><i class="fe fe-arrow-up-circle text-green"></i> 1.5%</span> last month</span>
            </div>
        </div>
    </div>
    <div class="col-lg-3 col-md-6">
        <div class="card">
            <div class="card-body">
                <div class="d-flex">
                    <div class="mt-2">
                        <h6 class="">Total Requests</h6>
                        <h2 class="mb-0 number-font">{{ total_requests|default:0 }}</h2>
                    </div>
                    <div class="ms-auto">
                        <div class="chart-wrapper mt-1">
                            <i class="fa fa-chart-line fa-3x text-warning"></i>
                        </div>
                    </div>
                </div>
                <span class="text-muted fs-12"><span class="text-warning"><i class="fe fe-arrow-up-circle text-warning"></i> 15.2%</span> last month</span>
            </div>
        </div>
    </div>
    <div class="col-lg-3 col-md-6">
        <div class="card">
            <div class="card-body">
                <div class="d-flex">
                    <div class="mt-2">
                        <h6 class="">Success Rate</h6>
                        <h2 class="mb-0 number-font">{{ success_rate|default:0 }}%</h2>
                    </div>
                    <div class="ms-auto">
                        <div class="chart-wrapper mt-1">
                            <i class="fa fa-thumbs-up fa-3x text-info"></i>
                        </div>
                    </div>
                </div>
                <span class="text-muted fs-12"><span class="text-info"><i class="fe fe-arrow-up-circle text-info"></i> 0.8%</span> last month</span>
            </div>
        </div>
    </div>
</div>
<!-- ROW-2 END -->

<!-- Template Preview Modal -->
<div class="modal fade" id="templatePreviewModal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Template Preview</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <pre><code class="language-xml" id="template-content"></code></pre>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary" onclick="copyToClipboard()">Copy to Clipboard</button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<!-- INTERNAL Data tables js-->
<script src="{% static 'plugins/datatable/js/jquery.dataTables.min.js' %}"></script>
<script src="{% static 'plugins/datatable/js/dataTables.bootstrap5.js' %}"></script>
<script src="{% static 'plugins/datatable/dataTables.responsive.min.js' %}"></script>
<script src="{% static 'plugins/datatable/js/dataTables.buttons.min.js' %}"></script>
<script src="{% static 'plugins/datatable/js/buttons.bootstrap5.min.js' %}"></script>
<script src="{% static 'plugins/datatable/js/jszip.min.js' %}"></script>
<script src="{% static 'plugins/datatable/js/buttons.html5.min.js' %}"></script>
<script src="{% static 'plugins/datatable/js/buttons.print.min.js' %}"></script>

<!-- INTERNAL Prism js -->
<script src="{% static 'plugins/prism/prism.js' %}"></script>

<!-- Sweet Alert -->
<script src="{% static 'plugins/sweet-alert/sweetalert.min.js' %}"></script>

<script>
$(document).ready(function() {
    $('#templates-table').DataTable({
        "responsive": true,
        "pageLength": 25,
        "order": [[ 5, "desc" ]],
        "dom": 'Bfrtip',
        "buttons": [
            'copy', 'csv', 'excel', 'pdf', 'print'
        ],
        "columnDefs": [
            { "orderable": false, "targets": 6 }
        ]
    });
});

function previewTemplate(templateId) {
    $.ajax({
        url: '/vast/templates/' + templateId + '/preview/',
        type: 'GET',
        success: function(response) {
            $('#template-content').text(response.content);
            Prism.highlightElement(document.getElementById('template-content'));
            $('#templatePreviewModal').modal('show');
        },
        error: function() {
            swal("Error!", "Failed to load template preview.", "error");
        }
    });
}

function testTemplate(templateId) {
    window.open('/vast/templates/' + templateId + '/test/', '_blank');
}

function duplicateTemplate(templateId) {
    swal({
        title: "Duplicate Template",
        text: "This will create a copy of the template.",
        type: "info",
        showCancelButton: true,
        confirmButtonColor: "#28a745",
        confirmButtonText: "Yes, duplicate it!",
        cancelButtonText: "Cancel"
    }, function(isConfirm) {
        if (isConfirm) {
            $.ajax({
                url: '/vast/templates/' + templateId + '/duplicate/',
                type: 'POST',
                data: {
                    'csrfmiddlewaretoken': '{{ csrf_token }}'
                },
                success: function(response) {
                    if (response.success) {
                        location.reload();
                    } else {
                        swal("Error!", response.message || "Failed to duplicate template.", "error");
                    }
                },
                error: function() {
                    swal("Error!", "Failed to duplicate template.", "error");
                }
            });
        }
    });
}

function deleteTemplate(templateId) {
    swal({
        title: "Are you sure?",
        text: "This action cannot be undone!",
        type: "warning",
        showCancelButton: true,
        confirmButtonColor: "#DD6B55",
        confirmButtonText: "Yes, delete it!",
        cancelButtonText: "Cancel"
    }, function(isConfirm) {
        if (isConfirm) {
            var form = document.createElement('form');
            form.method = 'POST';
            form.action = '/vast/templates/' + templateId + '/delete/';
            
            var csrfToken = document.createElement('input');
            csrfToken.type = 'hidden';
            csrfToken.name = 'csrfmiddlewaretoken';
            csrfToken.value = '{{ csrf_token }}';
            form.appendChild(csrfToken);
            
            document.body.appendChild(form);
            form.submit();
        }
    });
}

function copyToClipboard() {
    var content = document.getElementById('template-content').textContent;
    navigator.clipboard.writeText(content).then(function() {
        swal("Copied!", "Template content copied to clipboard.", "success");
    }, function() {
        swal("Error!", "Failed to copy to clipboard.", "error");
    });
}
</script>
{% endblock %}