{% extends 'base.html' %}

{% block body %}

<br>

<div class="button-group">

    <a href="{%url 'display_laptops' %}" class="btn btn-primary btn-md" role="button"> Laptops</a>
    <a href="{% url 'add_laptop' %}" class="btn btn-warning btn-sm" role="button"> +</a>

    <a href="{%url 'display_desktops' %}" class="btn btn-primary btn-md" role="button"> Desktops</a>
    <a href="{% url 'add_desktop' %}" class="btn btn-warning btn-sm" role="button"> +</a>

    <a href="{%url 'display_mobiles' %}" class="btn btn-primary btn-md" role="button"> Mobiles</a>
    <a href="{% url 'add_mobile' %}" class="btn btn-warning btn-sm" role="button"> +</a>


</div>

<br>

<h4>Currently Viewing {{header}}</h4>
<table class="table table-hover">
    <thead>
        <tr>
            <th>id</th>
            <th>Model</th>
            <th>Price</th>
            <th>Status</th>
            <th>Issues</th>
        </tr>
    </thead>

    <tbody>

        {% for item in items %}

        <tr>
            <td>{{ item.pk }}</td>
            <td>{{ item.type }}</td>
            <td>{{ item.price }}</td>
            <td>{{ item.status }}</td>
            <td>{{ item.issues }}</td>
            {% if header|lower == "laptops" %}
            <td>
                <a href="{% url 'edit_laptop' item.pk %}" class="btn btn-warning btn-sm" role="button">Edit</a>
                <a href="{% url 'delete_laptop' item.pk %}" class="btn btn-danger btn-sm" role="button">X</a>
            </td>
            {% elif header|lower == "desktops" %}
            <td>
                <a href="{% url 'edit_desktop' item.pk %}" class="btn btn-warning btn-sm" role="button">Edit</a>
                <a href="{% url 'delete_desktop' item.pk %}" class="btn btn-danger btn-sm" role="button">X</a>
            </td>
            {% else %}
            <td>
                <a href="{% url 'edit_mobile' item.pk %}" class="btn btn-warning btn-sm" role="button">Edit</a>
                <a href="{% url 'delete_mobile' item.pk %}" class="btn btn-danger btn-sm" role="button">X</a>
            </td>
            {% endif %}
        </tr>


        {% endfor %}

    </tbody>
</table>

{% endblock %}