<section class="facility-form">
    <details class="hoo-accordion" open>
        <summary class="hoo-accordion-header">
            <div class="hoo-accordion-summary">
                {{> atoms-icon }}
                <h3>Reported issue{{text}}</h3>
            </div>
        </summary>
        <div>
            {{> molecules-new-disp-step1 }}

        </div>
    </details>
    <section class="review">
        <h2>Review and verify</h2>
        {{> molecules-new-form-step2 }}
    </section>
</section>
<script>
    // Get the current date and time
    const now = new Date();

    // Format the date and time based on the user's locale
    const formattedDateTime = now.toLocaleString();  // Automatically uses the system's locale

    // Insert the current date and time into the first <time> field
    document.getElementById('current-time').setAttribute('datetime', now.toISOString());
    document.getElementById('current-time').textContent = formattedDateTime;

    // Calculate the next time (one hour later)
    const nextTime = new Date(now.getTime() + 60 * 60 * 1000);  // Adds one hour (60 minutes * 60 seconds * 1000 ms)

    // Format the next time based on the user's locale
    const formattedNextTime = nextTime.toLocaleString();

    // Insert the next time into the second <time> field
    document.getElementById('next-time').setAttribute('datetime', nextTime.toISOString());
    document.getElementById('next-time').textContent = formattedNextTime;
</script>