{% extends 'base1.html.twig' %}

{% block content %}
	<div class="content">
	    <div class="container-fluid">
	        <div class="row">
	            <div class="col-md-12">
	                <div class="card">
	                    <div class="header" style="display:flex; align-items: center; justify-content: space-between">
	                        <h4 class="title">Depot List</h4>
                            <a href="{{ path('depot') }}" class="btn btn-default">Add New</a>
	                    </div>
	                    <div class="content table-responsive table-full-width">
                                <table class="table table-hover" data-page-length='100' style="table-layout: fixed;">
                                    <thead>
                                        <tr>
							              <th>Name</th>
							              <th>Location</th>
							              <th>Actions</th>
							            </tr>
                                    </thead>
                                    <tbody>
                                        {% for item in depots %}
											<tr class="tableRow">
								              <td>{{ item.name }}</td>
								              <td>{{ item.location }}</td>
								              <td>
                                                <a href="{{ path('allReleasesByDepot', {'id': item.id}) }}">Release Orders</a> 
                                                | <a href="{{ path('depot', {'id': item.id}) }}">Edit</a> 
                                                | <a href="{{ path('delete_depot', {'id': item.id}) }}" class="delete">Delete</a>
                                              </td>
								            </tr>
										{% endfor %}
                                    </tbody>
                                </table>

                        </div>
	                </div>
	            </div>

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

{% block javascript %}
 {{ parent() }}
 <script>
    document.querySelectorAll('.delete').forEach(del => {
        del.addEventListener('click', function(e){
            e.preventDefault();
            const link = e.target.getAttribute('href')
            const res = confirm('Are you sure you want to delete this depot?');
            if(res) {
                window.location.href = link;
            }
        })
    })
 </script>
{% endblock %}