{% extends 'base.html' %}

{% block content %}
<div class="text-center my-4">
    <h1 class="text-3xl font-bold mb-4">Camera Detection Page</h1>
    <!-- Upload Image Button -->
    <div class="flex flex-col items-center mb-4">
        <label for="imageInput"
            class="cursor-pointer inline-flex items-center px-4 py-2 bg-blue-500 text-white rounded-md shadow-sm">
            <svg class="w-6 h-6 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                xmlns="http://www.w3.org/2000/svg">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                    d="M14 14v5m0 0v-5m0 5h5m-5 0H9a4 4 0 01-4-4V5a2 2 0 012-2h8a2 2 0 012 2v4m0 6.586a2 2 0 11-2-2 2 2 0 012 2zM14 14V9a2 2 0 00-2-2H6m8 5h-3a2 2 0 01-2-2V6m5 5V6a2 2 0 00-2-2h-5">
                </path>
            </svg>
            <span>Upload Image</span>
        </label>
        <input type="file" id="imageInput" accept="image/*" class="hidden" />
    </div>
    <!-- Uploaded Image Display -->
    <div class="flex justify-center items-center mb-4 h-80">
        <div id="imageContainer"
            class="relative w-96 h-80 flex justify-center items-center border-2 border-dashed border-blue-500 rounded">
            <img id="uploadedImage" src="#" alt="Uploaded Image" class="max-w-full max-h-full" style="display: none;">
        </div>
    </div>
    <!-- Predict Button -->
    <div class="flex justify-center mb-4">
        <button id="predictBtn" class="p-2 bg-blue-500 text-white rounded">IS THERE A WILDFIRE?</button>
    </div>
    <!-- Prediction Result -->
    <div id="predictionResult" class="text-xl font-bold text-center mt-4">PREDICTION WILL BE SHOWN HERE</div>
    <!-- Confidence Bar -->
    <div class="mt-4 flex items-center justify-center">
        <div class="w-96 bg-gray-300 h-8 rounded-lg relative">
            <div id="confidenceBar" class="h-full rounded-lg bg-green-500"></div>
            <div id="confidenceText" class="absolute inset-0 flex items-center justify-center text-white font-bold">
            </div>
        </div>
    </div>
</div>
<!-- JavaScript for Camera Detection -->
<script src="{{ url_for('static', filename='js/camera.js') }}"></script>
{% endblock %}