<link rel="stylesheet" href="{{ url_for('static', filename='css/admin.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='css/forms.css') }}" />
<link rel="stylesheet" href="{{ url_for('static', filename='css/modal.css') }}">

<!-- USER MANAGEMENT-->
{% if users is defined and users != None %}
    <p>Showing {{users|count}} users</p>
    <div class="user-container">
        <table class="table table-style">
            <thead>
              <tr>
                <th scope="col">#</th>
                <th scope="col">Username</th>
                <th scope="col">E-Mail</th>
                <th scope="col">Phone Number</th>
                <th scope="col">Role</th>
                <th>Actions</th>
              </tr>
            </thead>
            <tbody>
                {% for user in users %}
                    <tr>
                        <td>{{user.id}}</td>
                        <td>{{user.username}}</td>
                        <td>{{user.email}}</td>
                        <td>{{user.phone}}</td>
                        <td>{{user.role}}</td>
                        <td>
                            <div class="form-row">
                                <a href="{{ url_for('main.users.display_update', id=user.id) }}">
                                    <div class="button neutral">
                                        <p class="btnText">Edit User</p>
                                        <div class="btnTwo">
                                          <p class="btnText2">{{user.id}}</p>
                                        </div>
                                    </div>
                                </a>
                                <label for="deleteModal{{user.id}}">
                                    <div class="button error">
                                        <p class="btnText">DELETE USER</p>
                                        <div class="btnTwo">
                                          <p class="btnText2">X</p>
                                        </div>
                                    </div>
                                </label>
                            </div>
                        </td>
                    </tr>

                    <!-- Modal -->
                    <input class="modal-state" id="deleteModal{{user.id}}" type="checkbox" />
                    <div class="modal">
                        <label class="modal__bg" for="deleteModal{{user.id}}"></label>
                        <div class="modal__inner">
                            <label class="modal__close" for="deleteModal{{user.id}}"></label>
                            <h2>Confirm Delete</h2>
                            <p>Are you sure you want to <b>delete</b> {{user.role}} <b>{{user.username}}</b></p>
                            <form method="POST" action="{{ url_for('main.users.delete', id=user.id) }}">
                                <div class="form-row">
                                    <input type="submit" class="modal-btn error" for="deleteModal{{user.id}}" value="Delete" />
                                </div>
                            </form>
                        </div>
                    </div>
                {% endfor %}
            </tbody>
        </table>
    </div>


<!-- PRODUCT MANAGEMENT-->
{% elif products is defined and products != None %}
    <p>Showing {{products|count}} products</p>
    <div class="user-container">
        <table class="table table-style">
            <thead>
              <tr>
                <th scope="col">#</th>
                <th scope="col">Name</th>
                <th scope="col">SellerID</th>
                <th scope="col">Price</th>
                <th scope="col">Category</th>
                <th scope="col">Quantity</th>
                <th>Actions</th>
              </tr>
            </thead>
            <tbody>
                {% for product in products %}
                    <tr>
                        <td>{{product.id}}</td>
                        <td>{{product.name}}</td>
                        <td>{{product.sellerID}}</td>
                        <td>{{product.cost}}</td>
                        <td>{{product.category}}</td>
                        <td>{{product.quantityAvailable}}</td>
                        <td>
                            <div class="form-row">
                                <a href="{{url_for('main.products.product', id=product.id)}}">
                                    <div class="button neutral">
                                        <p class="btnText">Edit Product</p>
                                        <div class="btnTwo">
                                          <p class="btnText2">{{product.id}}</p>
                                        </div>
                                    </div>
                                </a>
                                <label for="deleteModal{{product.id}}">
                                    <div class="button error">
                                        <p class="btnText">DELETE PRODUCT</p>
                                        <div class="btnTwo">
                                          <p class="btnText2">X</p>
                                        </div>
                                    </div>
                                </label>
                            </div>
                        </td>
                    </tr>

                    <!-- Modal -->
                    <input class="modal-state" id="deleteModal{{product.id}}" type="checkbox" />
                    <div class="modal">
                        <label class="modal__bg" for="deleteModal{{product.id}}"></label>
                        <div class="modal__inner">
                            <label class="modal__close" for="deleteModal{{product.id}}"></label>
                            <h2>Confirm Delete</h2>
                            <p>Are you sure you want to <b>delete</b> <b>{{product.name}}</b></p>
                            <form method="POST" action="{{ url_for('main.seller.delete', id=product.id) }}">
                                <div class="form-row">
                                    <input type="submit" class="modal-btn error" for="deleteModal{{product.id}}" value="Delete" />
                                </div>
                            </form>
                        </div>
                    </div>
                {% endfor %}
            </tbody>
        </table>
    </div>


{% else %}
    <p>Sorry... We have nothing to show here!</p>
{% endif %}