<style>
    *,
    *::before,
    *::after {
        box-sizing: border-box;
    }

    .tab__btn--active {
        opacity: 1;
    }

    .tab__btn:hover {
        opacity: 1;
    }


    .tab__item {
        position: absolute;

        display: none;
        width: 100%;
        padding: 20px;

        font-family: 'Arial', sans-serif;
        font-size: 14px;
        color: black;
        line-height: 1.4em;


        background: white;

        animation: fadeEffect 0.6s ease;
    }

    .tab__item--active {
        display: block;
    }

    @keyframes fadeEffect {
        from {
            opacity: 0;
            transform: translateY(30px);
        }

        to {
            opacity: 1;
            transform: translateY(0px);
        }
    }

    .btn.active {
        background-color: #337ab7;
        color: #fff;
    }
</style>

<div class="tabs">
    <div class="tab__btns">
        <button type="button" class="btn btn-default tab__btn active" data-item="item-1">
            <span>System Details</span>
        </button>
        <button type="button" class="btn btn-default tab__btn" data-item="item-2">
            <span>Apache Details</span>
        </button>
        <button type="button" class="btn btn-default tab__btn" data-item="item-3">
            <span>Mongo Details</span>
        </button>
        <button type="button" class="btn btn-default tab__btn" data-item="item-4">
            <span>Tomcat Details</span>
        </button>
        <button type="button" class="btn btn-default tab__btn" data-item="item-5">
            <span>More Details</span>
        </button>
    </div>

    <div class="tab__items modal-content">
        <div id="item-1" class="tab__item tab__item--active">
            <div style="display:grid; grid-template-columns: 1fr 1fr;">
                <div style="width:100%; margin:0 auto;">

                    <div class="table-responsive">
                        <div>
                            <table class="table align-items-center table-dark">
                                <thead class="thead-dark">
                                    <tr>
                                        <th scope="col">
                                            System Details
                                        </th>
                                        <th scope="col">

                                        </th>

                                    </tr>
                                </thead>
                                <tbody class="list">
                                    {% for key, value in System.items() %}
                                    <tr>
                                        <td class="budget">
                                            {{key}}
                                        </td>
                                        <td class="status">
                                            <span>
                                                <i class="bg-warning"></i>{{value[0]}}
                                            </span>
                                        </td>
                                        {% endfor %}
                                        {% for key, value in physical.items() %}
                                    <tr>
                                        {% if key == "System Space" or key =="Free Space" %}
                                        <td class="budget">
                                            {{key}}
                                        </td>
                                        <td class="status">
                                            <span>
                                                <i class="bg-warning"></i>{{value[0] | lstrip_zero}}
                                            </span>
                                        </td>
                                        {% else %}
                                        <td class="budget">
                                            {{key}}
                                        </td>
                                        <td class="status">
                                            <span>
                                                <i class="bg-warning"></i>{{value[0] | bytes_to_gb}}
                                            </span>
                                        </td>
                                        {% endif %}
                                        {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div id="item-2" class="tab__item">
            <div style="display:grid; grid-template-columns: 1fr 1fr;">
                <div style="width:80%; margin:0 auto;">
                    <div class="table-responsive">
                        <div>
                            <table class="table align-items-center table-dark">
                                <thead class="thead-dark">
                                    <tr>
                                        <th scope="col">
                                            System Details
                                        </th>
                                        <th scope="col">

                                        </th>

                                    </tr>
                                </thead>
                                <tbody class="list">
                                    {% for key, value in physical.items() %}
                                    <tr>
                                        {% if key == "System Space" or key =="Free Space" %}
                                        <td class="budget">
                                            {{key}}
                                        </td>
                                        <td class="status">
                                            <span>
                                                <i class="bg-warning"></i>{{value[0] | lstrip_zero}}
                                            </span>
                                        </td>
                                        {% else %}
                                        <td class="budget">
                                            {{key}}
                                        </td>
                                        <td class="status">
                                            <span>
                                                <i class="bg-warning"></i>{{value[0] | bytes_to_gb}}
                                            </span>
                                        </td>
                                        {% endif %}
                                        {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                
            </div>
        </div>


    </div>
</div>