{% extends 'base_layout.html' %}

{% block content%}
<main>
                    <div class="container-fluid px-4">
                        <h1 class="mt-4"> Dārzi </h1>
                        <hr class="divider" />
                        {% for garden in gardens %}
                            <table class="table table-light table-bordered">
                                    <thead class="thead-light">
                                        <tr>
                                          <th scope="col">Nosaukums</th>
                                          <th scope="col">Meteostācija</th>
                                          <th scope="col">Aktivitāte</th>
                                        </tr>
                                    </thead>
                        <h2 class="mt-4"> {{garden.name}} </h2>
                            {% for block in blocks %}
                                {% if block.garden_id == garden.id%}
                                <td>{{block.name}} </td>
                                {% if block.private_meteostation_id != Null%}
                                    {% for station in meteostations %}
                                        {% if block.private_meteostation_id == station.id %}
                                            <td>{{station.name}} </td>
                                        {% endif%}
                                    {% endfor %}
                                {% else%}
                                    <td> Nav norādīta</td>
                                {% endif %}
                                <td>
                                        <button type="button" class="btn btn-outline-dark" data-bs-toggle="modal" data-bs-target="#editBlock{{block.id}}">
                                            <i class="fa-solid fa-pencil"></i>
                                      </button>
                                      <div class="modal fade " id="editBlock{{block.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">Pievienot kvartālu:</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="blockID" name="blockID" type="text"  class="form-control" value="{{block.id}}">
                                                            <label for="block_name" class="col-4 col-form-label">Nosaukums:</label>
                                                                <div class="col-8 mb-3">
                                                                    <input id="block_name" name="block_name" type="text"  class="form-control" value="{{block.name}} ">
                                                                </div>
                                                        </div>
                                                        <div class="form-group row">
                                                            <label for="block_station" class="col-4 col-form-label">Meteostācija:</label>
                                                                <div class="col-8 mb-3">
                                                                    <select id="block_station" name="block_station" class=form-control">
                                                                        {% for station in meteostations %}
                                                                        <option value="{{station.id}}"> {{station.name}}</option>
                                                                        {% endfor %}
                                                                        <option value=0> Nenorādīt </option>
                                                                    </select>
                                                                </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="editBlock" class="btn btn-secondary ">Saglabāt</button>
                                                </div>
                                                    </form>
                                            </div>
                                        </div>
                                    </div>
                                        <button type="submit" class="btn btn-outline-dark" form="delete{{block.id}}">
                                            <i class="fa-solid fa-trash"></i>
                                        </button>
                                        <form method = 'POST' id="delete{{block.id}}">
                                            {% csrf_token %}
                                            <input hidden id="blockID" name="blockID" type="text"  class="form-control" value="{{block.id}}">
                                        </form>
                                </td>
                                </tr>
                                {% endif%}
                            {% endfor%}
                            <td> <button type="button" class="btn btn-outline-dark" data-bs-toggle="modal" data-bs-target="#addBlock{{garden.id}}"> + Pievienot jaunu kvartālu</button> </td>
                            <td></td>
                            <td></td>
                            </tr>
                            </table>
                            <div class="modal fade " id="addBlock{{garden.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">Pievienot kvartālu:</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="gardenID" name="gardenID" type="text"  class="form-control" value="{{garden.id}}">
                                                    <label for="block_name" class="col-4 col-form-label">Nosaukums:</label>
                                                        <div class="col-8 mb-3">
                                                            <input id="block_name" name="block_name" type="text"  class="form-control">
                                                        </div>
                                                </div>
                                                <div class="form-group row">
                                                    <label for="block_station" class="col-4 col-form-label">Meteostācija:</label>
                                                        <div class="col-8 mb-3">
                                                            <select id="block_station" name="block_station" class=form-control">
                                                                {% for station in meteostations %}
                                                                <option value="{{station.id}}"> {{station.name}}</option>
                                                                {% endfor %}
                                                                <option value=0> Nenorādīt </option>
                                                            </select>
                                                        </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="addBlock" class="btn btn-secondary ">Saglabāt</button>
                                        </div>
                                            </form>
                                    </div>
                                </div>
                            </div>
                        {% endfor %}

                </main>
                <script type="text/javascript">
                function deleteBlock() {
                document.getElementById("deleteForm").submit();
                }
                </script>
{% endblock %}