{%extends 'base.html' %}
{% block content %}
                <div class="row">
                    <div class="col-md-4">
                        <div class="card mb-4">
                            <div class="card-body">
                                <h5>Gate Control Dashboard</h5>
                                <form method="POST">
                                    {{ form.hidden_tag() }}
                                    <div class="d-grid gap-2 mb-3">
                                        {{ form.open_gate(class="btn btn-dark") }} 
                                    </div>
                                    <div class="d-grid gap-2 mb-3">
                                        {{ form.close_gate(class="btn btn-dark") }}
                                    </div>
                                    <div class="d-grid gap-2 mb-3">
                                        {{ form.check_camera(class="btn btn-dark") }}
                                    </div>
                                    <div class="mb-3">
                                        {{ form.debug_mode() }} 
                                        <label for="{{ form.debug_mode.id }}">Enable Debug Mode</label>
                                    </div>
                                    <div class="d-grid">
                                        <button type="submit" class="btn btn-dark">Submit</button>
                                    </div>
                                </form>
                                <h6>Gate Status: {{ gate_status }}</h6>
                                <h6>Camera Status: {{ camera_status }}</h6>
                                {% if debug_mode %}
                                    <h7>Debug Mode is Enabled</h7>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="card mb-4">
                            <div class="card-body">
                                <h5 class="card-title">System Logs</h5>
                                <div class="log-container" style="max-height: 250px; overflow-y: auto;">
                                    <table class="table table-sm table-hover">
                                        <thead>
                                            <tr>
                                                <th scope="col">Time</th>
                                                <th scope="col">Action</th>
                                                <th scope="col">Status</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            {% for log in recent_logs %}
                                            <tr>
                                                <td><small>{{ log.timestamp.strftime('%H:%M:%S') }}</small></td>
                                                <td><small>{{ log.action }}</small></td>
                                                <td>
                                                    <span class="badge {% if log.status == 'success' %}bg-success{% elif log.status == 'warning' %}bg-warning{% elif log.status == 'error' %}bg-danger{% else %}bg-secondary{% endif %}">
                                                        {{ log.status }}
                                                    </span>
                                                </td>
                                            </tr>
                                            {% endfor %}
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                    
</html>
{% endblock %}