{% extends 'base_layout.html' %}

{% block content %}
                <main>
                    <div class="container-fluid px-4">
                        <h1 class="mt-4"> Meteostacijas 
                            <!-- Button trigger modal -->
                            <button type="button" class="btn btn-outline-dark" data-bs-toggle="modal" data-bs-target="#addMeteostation">
                              <i class="fa-solid fa-plus"></i>  Pievienot
                            </button>
                        </h1>
                            <!-- Modal -->
                            <div class="modal fade " id="addMeteostation" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
                                <div class="modal-dialog">
                                    <div class="modal-content ">
                                        <div class="modal-header">
                                            <h3 class="modal-title" id="staticBackdropLabel">Pievienot Meteostaciju:</h3>
                                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                        </div>
                                    <div class="modal-body">
                                            <form method = 'POST' enctype="multipart/form-data">
                                            {% csrf_token %}
                                        <div class="form-group row">
                                            <label for="meteostation_name" class="col-4 col-form-label">Nosaukums:</label>
                                                <div class="col-8 mb-3">
                                                    <input id="meteostation_name" name="meteostation_name" type="text"  class="form-control" required>
                                                </div>
                                        </div>
                                        <div class="form-group row">
                                            <label for="meteostation_location" class="col-4 col-form-label">Atrašanās vieta:</label>
                                                <div class="col-8 mb-3">
                                                    <input id="meteostation_location" name="meteostation_location" type="text"  class="form-control">
                                                </div>
                                        </div>
                                        <div class="form-group row">
                                            <label for="meteostation_service" class="col-4 col-form-label">Serviss:</label>
                                                <div class="col-8 mb-3">
                                                    <select id="meteostation_service" name="meteostation_service" class="form-select">
                                                        {% for service in services %}
                                                        <option value={{service.id}} >{{service.title}}</option>
                                                        {% endfor %}
                                                    </select>
                                                </div>
                                        </div>
                                        <div class="form-group row">
                                            <label for="meteostation_serviceuri" class="col-4 col-form-label">Servisa URI:</label>
                                                <div class="col-8 mb-3">
                                                    <input id="meteostation_serviceuri" name="meteostation_serviceuri" type="text"  class="form-control">
                                                </div>
                                        </div>
                                    </div>
                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Atcelt</button>
                                            <button type="submit" name="addMeteostation" class="btn btn-success ">Saglabāt</button>
                                        </div>
                                            </form>
                                    </div>
                                </div>
                            </div>

                        
                        <div class="row">
                                <table class="table table-light table-bordered">
                                    <thead class="thead-light">
                                        <tr>
                                          <th scope="col">Nosaukums</th>
                                          <th scope="col">Atrašanās vieta</th>
                                          <th scope="col">Servisa URI</th>
                                          <th scope="col">Serviss</th>
                                          <th scope="col">Aktivitāte</th>
                                        </tr>
                                      </thead>
                                    {% for station in meteostations %}
                                    <tr>
                                      <th scope="row"> {{station.name}} </th>
                                      <td>{{station.location}} </td>
                                      <td>{{station.service_uri}} </td>
                                      {% for service in services %}
                                      {% if station.meteoservice.id == service.id %}
                                        <td> {{service.title}} </td>
                                      {% endif %}
                                      {% endfor %}
                                      <td>
                                        <button type="button" class="btn btn-outline-dark" data-bs-toggle="modal" data-bs-target="#editStation{{station.id}}">
                                            <i class="fa-solid fa-pencil"></i>
                                      </button>
                                        <div class="modal fade " id="editStation{{station.id}}" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
                                            <div class="modal-dialog">
                                                <div class="modal-content ">
                                                    <div class="modal-header">
                                                        <h3 class="modal-title" id="staticBackdropLabel">Rediģēt meteostaciju:</h3>
                                                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                                    </div>
                                                    <div class="modal-body">
                                                        <form method = 'POST' enctype="multipart/form-data">
                                                        {% csrf_token %}
                                                        <table class = 'table'>
                                                    <div class="form-group row">
                                                        <input hidden id="meteoID" name="meteoID" type="text"  class="form-control" value="{{station.id}}">
                                                        <label for="meteostation_name" class="col-4 col-form-label">Nosaukums:</label>
                                                            <div class="col-8 mb-3">
                                                                <input id="meteostation_name" name="meteostation_name" type="text" value = {{station.name}} class="form-control" required>
                                                            </div>
                                                    </div>
                                                    <div class="form-group row">
                                                        <label for="meteostation_location" class="col-4 col-form-label">Atrašanās vieta:</label>
                                                            <div class="col-8 mb-3">
                                                                <input id="meteostation_location" name="meteostation_location" type="text" value = {{station.location}} class="form-control">
                                                            </div>
                                                    </div>
                                                    <div class="form-group row">
                                                        <label for="meteostation_service" class="col-4 col-form-label">Serviss:</label>
                                                            <div class="col-8 mb-3">
                                                                <select id="meteostation_service" name="meteostation_service" class="form-select">
                                                                    {% for service in services %}
                                                                    <option value={{service.id}} >{{service.title}}</option>
                                                                    {% endfor %}
                                                                </select>
                                                            </div>
                                                    </div>
                                                    <div class="form-group row">
                                                        <label for="meteostation_serviceuri" class="col-4 col-form-label">Servisa URI:</label>
                                                            <div class="col-8 mb-3">
                                                                <input id="meteostation_serviceuri" name="meteostation_serviceuri" type="text" value = {{station.service_uri}} class="form-control">
                                                            </div>
                                                    </div>
                                                        </table>
                                                </div>
                                                    <div class="modal-footer">
                                                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Atcelt</button>
                                                        <button type="submit" name="editMeteostation" class="btn btn-success ">Saglabāt</button>
                                                    </div>
                                                        </form>
                                                </div>
                                            </div>
                                        </div>
                                        <button type="submit" class="btn btn-outline-dark" data-bs-toggle="modal" data-bs-target="#confirmDelete{{station.id}}">
                                            <i class="fa-solid fa-trash"></i>
                                        </button>

                                        <div class="modal fade" id="confirmDelete{{station.id}}" tabindex="-1" aria-labelledby="confirmDeleteLabel{{station.id}}label" aria-hidden="true">
                                            <div class="modal-dialog">
                                                <div class="modal-content">
                                                    <div class="modal-header">
                                                        <h5 class="modal-title" id="confirmDeleteLabel{{station.id}}">Dzēst Meteostaciju: {{ station.name }}</h5>
                                                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                                    </div>
                                                    <div class="modal-body">
                                                        Vai esat parliecināts?
                                                    </div>
                                                    <div class="modal-footer">
                                                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Atcelt</button>
                                                        <button type="submit" name="deleteMeteostation" form="delete{{station.id}}" class="btn btn-danger">Dzēst</button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <form method = 'POST' id="delete{{station.id}}">
                                            {% csrf_token %}
                                            <input hidden id="meteoID" name="meteoID" type="text"  class="form-control" value="{{station.id}}">
                                        </form>
                                    </td>
                                    </tr>
                                    {% endfor %}
                                </table>
                        </div>
                </main>
{% endblock %}