<div class="o-tableBlocks -orders">
    <table class="table">
        <thead>
            <tr>
                <th scope="col"><span class="a-sort d-inline-flex align-items-center font-weight-bold cursor-pointer  ">Status<i class="icon-arrow-down"></i></span></th>
                <th scope="col"><span class="a-sort d-inline-flex align-items-center font-weight-bold cursor-pointer  ">Bestelling<i class="icon-arrow-down"></i></span></th>
                <th scope="col"><span class="a-sort d-inline-flex align-items-center font-weight-bold cursor-pointer  ">Soort<i class="icon-arrow-down"></i></span></th>
                <th scope="col"><span class="a-sort d-inline-flex align-items-center font-weight-bold cursor-pointer  ">Vorm<i class="icon-arrow-down"></i></span></th>
                <th scope="col"><span class="a-sort d-inline-flex align-items-center font-weight-bold cursor-pointer  ">Aantal GGW<i class="icon-arrow-down"></i></span></th>
                <th scope="col"><span class="a-sort d-inline-flex align-items-center font-weight-bold cursor-pointer  ">Aantal App<i class="icon-arrow-down"></i></span></th>
                <th scope="col"><span class="a-sort d-inline-flex align-items-center font-weight-bold cursor-pointer  ">Som<i class="icon-arrow-down"></i></span></th>
                <th scope="col"><span class="a-sort d-inline-flex align-items-center font-weight-bold cursor-pointer  ">Voortgang<i class="icon-arrow-down"></i></span></th>
                <th scope="col"><span class="a-sort d-inline-flex align-items-center font-weight-bold cursor-pointer -active -up">Gewijzigd<i class="icon-arrow-down"></i></span></th>
                <th scope="col"><span class="a-tableHead d-inline-block font-weight-bold ">
                        Team
                </th>
            </tr>
        </thead>
        <tbody>

            <tr class="m-tableBlock -loading">
                <td colspan="9">
                    <div class="d-flex justify-content-center mb-2">
                        <div class="a-loader -wave">
                            <svg class="a-loader__animation" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="background: rgba(241, 242, 243, 0);" width="75px" viewBox="12.5 38 75 22" preserveAspectRatio="xMidYMid">
                                <circle cx="30" cy="55" r="5" fill="#69d2c2">
                                    <animate attributeName="cy" calcMode="spline" keySplines="0.5 0 0.5 1 ; 0.5 0 0.5 1 ; 0.7 0 0.5 1 ; 0 0 0.5 1; 0 0 0.5 1; 0 0 0.5 1" repeatCount="indefinite" values="55;45;45;55;54;55;55" keyTimes="0;0.25;0.43;0.58;0.6;0.7;1" dur="1.75s" begin="-0.6"></animate>
                                </circle>
                                <circle cx="50" cy="55" r="5" fill="#e3000f">
                                    <animate attributeName="cy" calcMode="spline" keySplines="0.5 0 0.5 1 ; 0.5 0 0.5 1 ; 0.7 0 0.5 1 ; 0 0 0.5 1; 0 0 0.5 1; 0 0 0.5 1" repeatCount="indefinite" values="55;45;45;55;54;55;55" keyTimes="0;0.25;0.40;0.55;0.6;0.7;1" dur="1.75s" begin="-0.45"></animate>
                                </circle>
                                <circle cx="70" cy="55" r="5" fill="#ff85bb">
                                    <animate attributeName="cy" calcMode="spline" keySplines="0.5 0 0.5 1 ; 0.5 0 0.5 1 ; 0.7 0 0.5 1 ; 0 0 0.5 1; 0 0 0.5 1; 0 0 0.5 1" repeatCount="indefinite" values="55;45;45;55;54;55;55" keyTimes="0;0.25;0.40;0.55;0.6;0.7;1" dur="1.75s" begin="-0.3"></animate>
                                </circle>
                            </svg>
                        </div>
                    </div>
                </td>
            </tr>

        </tbody>
    </table>
</div>
<div class="o-tableBlocks -orders{% if loading_row %} -loading{% endif %}">
    <table class="table">
        <thead>
            <tr>
                <th scope="col">{% render '@sort', text='Status' %}</th>
                <th scope="col">{% render '@sort', text='Bestelling' %}</th>
                <th scope="col">{% render '@sort', text='Soort' %}</th>
                <th scope="col">{% render '@sort', text='Vorm' %}</th>
                <th scope="col">{% render '@sort', text='Aantal GGW' %}</th>
                <th scope="col">{% render '@sort', text='Aantal App' %}</th>
                <th scope="col">{% render '@sort', text='Som' %}</th>
                <th scope="col">{% render '@sort', text='Voortgang' %}</th>
                <th scope="col">{% render '@sort', text='Gewijzigd', active=true, up=true %}</th>
                <th scope="col">{% render '@table-head', text='Team' %}</th>
            </tr>
        </thead>
        <tbody>
            {% if loading %}
                <tr class="m-tableBlock -loading">
                    <td colspan="9">
                        <div class="d-flex justify-content-center mb-2">
                            {% render '@loader--wave' %}
                        </div>
                    </td>
                </tr>
            {% else %}
                {% for i in range(0, 15) -%}
                    <tr class="m-tableBlock{% if i == 0 and loading_row %} -rowLoading{% endif %}">
                        {% if i < 3 %}
                            {% set badge="select" %}
                            {% set text="Open" %}
                            {% set color="orange" %}
                            {% set variant="bestelling" %}
                            {% set progress=12.5 %}
                        {% elif i < 6 %}
                            {% set badge="select" %}
                            {% set text="Gesloten" %}
                            {% set color="secondary" %}
                            {% set variant="offerte" %}
                            {% set progress=25 %}
                        {% elif i < 9 %}
                            {% set badge="select" %}
                            {% set text="Open" %}
                            {% set color="orange" %}
                            {% set variant="welstand" %}
                            {% set progress=50 %}
                        {% elif i < 12 %}
                            {% set badge="select" %}
                            {% set text="Gesloten" %}
                            {% set color="secondary" %}
                            {% set variant="vergunningen" %}
                            {% set progress=75 %}
                        {% elif i < 15 %}
                            {% set badge="select" %}
                            {% set text="Open" %}
                            {% set color="orange" %}
                            {% set variant="contract" %}
                            {% set progress=100 %}
                        {% endif %}
                        <td>
                            {% render '@badge--'+badge, {text:text, color:color}, true %}
                        </td>
                        <td>
                            <strong>Elkien B.V.</strong><br>
                            <span class="text-muted">De Klamp</span><br>
                            <span class="text-muted">Leeuwarden, FR</span><br>
                        </td>
                        <td>Huur</td>
                        <td>GGW &amp; App</td>
                        <td>6</td>
                        <td>12</td>
                        <td>&euro;2.600.000</td>
                        <td>
                            {% render '@progress--small', {progress:progress, label:"Bestelling"}, true %}
                        </td>
                        <td>Vandaag om 17:22</td>
                        <td>
                            {% render '@teamlist' %}
                        </td>
                        {% if loading_row %}
                            <td colspan="12">
                                <div class="d-flex justify-content-center align-items-center h-100 mb-2">
                                    {% render '@loader--wave' %}
                                </div>
                            </td>
                        {% endif %}
                    </tr>
                {% endfor %}
            {% endif %}
        </tbody>
    </table>
</div>
{
  "loading": true,
  "loading_row": false
}

No notes defined.