<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <link rel="stylesheet" href="{{ url_for('ui.static', filename='css/style.css') }}">
    <link rel="stylesheet" href="{{ url_for('ui.static', filename='css/reset.min.css') }}">
    <link rel="stylesheet" href="{{ url_for('ui.static', filename='css/flexboxgrid.min.css') }}">
    <link rel="icon" href="{{ url_for('ui.static', filename='favicon.ico') }}" type="image/x-icon">

    <script src="{{ url_for('ui.static', filename='split-type.js') }}"></script>
    <script src="{{ url_for('ui.static', filename='gsap.min.js') }}"></script>
    <script src="{{ url_for('ui.static', filename='script.js') }}"></script>

    <title>Devices</title>
</head>
<body>

<div class="preloader">
<div class="progress-container">
<div class="progress-bar"></div>
</div>
<div class="text-container">
<div class="loading-text initial">Loading</div>
<div class="loading-text complete">Complete</div>
</div>
<div class="percentage">0</div>
</div>

<div class="content">

<section>
    <div class="row">
	{% set classes = ["item-a", "item-b", "item-c"] %}
	{% for device in devices %}
	<div class="col-md-4 col-sm-6 col-xs-12">
            <div class="card">
		<div class="cover {{ classes[loop.index0 % classes|length] }}">
                    <h1>{{ device|capitalize }}</h1>
                    <div class="card-back">
			<a href="javascript:void(0);" data-action="openModal" data-action-type="wol" data-device="{{ device }}">Wake Up</a>
		        <a href="javascript:void(0);" data-action="openModal" data-action-type="ping" data-device="{{ device }}">Ping</a>
                    </div>
                </div>
            </div>
        </div>
        {% endfor %}
    </div>
</section>

<div id="loading-spinner" class="spinner" style="display: none;">

<div class="semi-circle semi-circle-1"></div>
<div class="semi-circle semi-circle-2"></div>
<div class="semi-circle semi-circle-3"></div>

    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1"> <path opacity="0.3"> <animate attributeName="d" dur="1s" repeatCount="indefinite" values="M12 2 Q9 2.2 7.3 7 Q6.5 9.5 6.5 12 Q6.5 15 7.3 17 Q9 22 12 22;M12 2 Q6.5 2.2 3.3 7 Q2 9.5 2 12 Q2 15 3.4 17 Q6.5 22 12 22;" /> </path> <path opacity="0.3"> <animate attributeName="d" dur="1s" repeatCount="indefinite" values="M12 2 Q12 2.2 12 7 Q12 9.5 12 12 Q12 15 12 17 Q12 22 12 22;M12 2 Q9 2.2 7.3 7 Q6.5 9.5 6.5 12 Q6.5 15 7.3 17 Q9 22 12 22;" /> </path> <path opacity="0.3"> <animate attributeName="d" dur="1s" repeatCount="indefinite" values="M12 2 Q15 2.2 16.6 7 Q17.5 9.5 17.5 12 Q17.5 15 16.7 17 Q15 22 12 22;M12 2 Q12 2.2 12 7 Q12 9.5 12 12 Q12 15 12 17 Q12 22 12 22;" /> </path> <path opacity="0.3"> <animate attributeName="d" dur="1s" repeatCount="indefinite" values="M12 2 Q17.5 2.2 20.7 7 Q22 9.5 22 12 Q22 15 20.6 17 Q17.5 22 12 22;M12 2 Q15 2.2 16.6 7 Q17.5 9.5 17.5 12 Q17.5 15 16.7 17 Q15 22 12 22;" /> </path> <circle cx="12" cy="12" r="10" /> <path d="M2.4 8.6 Q6 7.1 12 7 Q18 7.1 21.6 8.6" /> <path d="M2.4 15.2 Q6 17.1 12 17.2 Q17 17.1 21.6 15.2" /> <path> <animate attributeName="d" dur="1s" repeatCount="indefinite" values="M12 2 Q6.5 2.2 3.3 7 Q2 9.5 2 12 Q2 15 3.4 17 Q6.5 22 12 22;M12 2 Q9 2.2 7.3 7 Q6.5 9.5 6.5 12 Q6.5 15 7.3 17 Q9 22 12 22;" /> </path> <path> <animate attributeName="d" dur="1s" repeatCount="indefinite" values="M12 2 Q9 2.2 7.3 7 Q6.5 9.5 6.5 12 Q6.5 15 7.3 17 Q9 22 12 22;M12 2 Q12 2.2 12 7 Q12 9.5 12 12 Q12 15 12 17 Q12 22 12 22;" /> </path> <path> <animate attributeName="d" dur="1s" repeatCount="indefinite" values="M12 2 Q12 2.2 12 7 Q12 9.5 12 12 Q12 15 12 17 Q12 22 12 22;M12 2 Q15 2.2 16.6 7 Q17.5 9.5 17.5 12 Q17.5 15 16.7 17 Q15 22 12 22;M12 2 Q17.5 2.2 20.7 7 Q22 9.5 22 12 Q22 15 20.6 17 Q17.5 22 12 22;" /> </path> </svg>

</div>


</div>

</body>
</html>
