{% extends "base.html" %}

{% block title %}
    SAR Records
{% endblock %}

{% block content %}
    <div class="container mt-5">
        <h2>SAR Records</h2>
        <table class="table table-bordered table-hover">
            <thead>
            <tr>
                <th>Id</th>
                <th>Title</th>
                <th>Start Date</th>
                <th>Finish Date</th>
                <th>Category</th>
                <th>Latitude</th>
                <th>Longitude</th>
                <th>Created by</th>
                <th>Actions</th>
            </tr>
            </thead>
            <tbody>
            {% for sar in sar_calls %}
                    <tr class="clickable-row" data-href="{{ url_for('sar_details', id=sar.SARCall.id) }}">
                    <td>{{ sar.SARCall.id }}</td>
                    <td>{{ sar.SARCall.title }}</td>
                    <td>{{ sar.SARCall.start_date }}</td>
                    <td>{{ sar.SARCall.finish_date }}</td>
                    <td>{{ sar.SARCategory.name }}</td>
                    <td>{{ sar.SARCall.latitude }}</td>
                    <td>{{ sar.SARCall.longitude }}</td>
                    <td>{{ sar.User.full_name }}</td>
                    <td>
                        <a href="{{ url_for('edit_sar', id=sar.SARCall.id) }}">
                            <button type="button" class="btn btn-info">Edit</button>
                        </a> |
                        <a href="{{ url_for('delete_sar', id=sar.SARCall.id) }}">
                            <button type="button" class="btn btn-danger">Delete</button>
                        </a>
                    </td>
                </tr>
            {% endfor %}
            </tbody>
        </table>
        <a href="/dashboard">Back to Dashboard</a>
    </div>

    <script>
    document.querySelectorAll('.clickable-row').forEach(row => {
        row.addEventListener('click', () => {
            window.location.href = row.dataset.href;
        });
    });
    </script>



{% endblock %}