{% extends 'base_layout.html' %}

{% block content %}
                <main>
                    <div class="container-fluid px-4">
                        <h1 class="mt-4">Uzņēmuma dārzi
                            <button type="button" class="btn btn-outline-dark" onclick="location.href =  '/create_garden' ">
                               <i class="fa-solid fa-plus"></i> Pievienot dārzu
                            </button> 
                            <button type="button" class="btn btn-outline-dark" onclick="location.href = '/gardens/blocks/edit';">
                                Pārvaldīt kvartālus
                            </button>
                            <!-- Modal -->
                            <div class="modal fade " id="addGarden" 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">Dārzs</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'>
                                                {% for field in newGarden_form %}
                                                <tr>
                                                    <th><h4>{{field.label}}</h4></th>
                                                    <td> <h4>{{ field }}</h4> </td>
                                                </tr>
                                                {% endfor %}
                                            </table>
                                    </div>
                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Atcelt</button>
                                            <button type="submit" class="btn btn-secondary ">Saglabāt</button>
                                        </div>
                                            </form>
                                    </div>
                                </div>
                            </div>
                        </h1>
                        <div class="row">
                            <table class="table table-light table-bordered">
                                <thead class="thead-light">
                                    <tr>
                                      <th scope="col">Dārzs</th>
                                      <th scope="col">Adrese</th>
                                      <th scope="col">Kvartālu skaits:</th>
                                      <th scope="col">Aktivitāte</th>
                                    </tr>
                                  </thead>
                                {% for garden in gardens%}
                                <tr>
                                  <th scope="row"> {{garden.name}} </th>
                                  <td>{{garden.address}}</td>
                                  <td>
                                  {{garden.blockcount}}
                                  <a type="button" class="btn btn-outline-dark" style="margin-left: 10px;"href="/gardens/blocks/{{garden.id}}" >
                                        <i class="fa-solid fa-plus"></i>
                                  </a>
                                  </td>
                                  <td>
                                  <button type="button" class="btn btn-outline-dark" data-bs-toggle="modal" data-bs-target="#editGarden{{garden.id}}">
                                        <i class="fa-solid fa-pencil"></i>
                                  </button>
                                    <div class="modal fade " id="editGarden{{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">Dārzs</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="gardenName" class="col-4 col-form-label mb-4">Dārza nosaukums:</label>
                                                        <div class="col-8">
                                                            <input id="gardenName" name="gardenName" type="text"  class="form-control" value="{{garden.name}}">
                                                        </div>
                                                </div>
                                                <div class="form-group row">
                                                    <label for="gardenAddress" class="col-4 col-form-label">Dārza adrese:</label>
                                                        <div class="col-8">
                                                            <input id="gardenAddress" name="gardenAddress" type="text"  class="form-control" value="{{garden.address}}">
                                                        </div>
                                                </div>
                                                    </table>
                                            </div>
                                                <div class="modal-footer">
                                                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Atcelt</button>
                                                    <button type="submit" class="btn btn-secondary ">Saglabāt</button>
                                                </div>
                                                    </form>
                                            </div>
                                        </div>
                                    </div>
                                   <a type="button"class="btn btn-outline-dark"  href="delete/{{garden.id}}" >
                                        <i class="fa-solid fa-trash"></i>
                                   </a>
                                    <a type="button"class="btn btn-outline-dark"  href="/gardens/{{garden.id}}">
                                        <i class="fa-solid fa-eye"></i>
                                    </a>
                                    </td>
                                </tr>
                                {% endfor %}
                            </table>
                        </div>
                    </div>
                </main>
{% endblock %}