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

            </div>
        </details>
    </section>
    <section class="review">
        <h2>Issue Resolution</h2>
        {{> molecules-new-disp-step3 }}
    </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>