<section class="facility-form">
    <details class="hoo-accordion" open>
        <summary class="hoo-accordion-header">
            <div class="hoo-accordion-summary"><span class="hoo-icon">
                <svg class="hoo-icon-svg icon-arrow-right" aria-hidden="true">
                    <title>Fluent UI / Fluent Design by hTWOo UI Framework</title>
                    <use xlink:href="/htwoo-core/images/icons.svg#icon-arrow-right">
                    </use>
                </svg></span>
            <h3>Reported issue</h3>
        </div>
    </summary>
    <div>
        <fieldset id="new-item-form" class="hoo-fieldset no-outline">
            <div class="hoo-field" role="group">
                <label class="hoo-label " for="toggle-97">Issue Type</label>Electrical</div>
            <div class="hoo-field stretched" role="group">
                <label class="hoo-label " for="toggle-97">Location</label>A104 - Breakout Space - Casual</div>
            <div class="hoo-field" role="group">
                <label class="hoo-label " for="toggle-97">Equipment/Asset ID</label>ACME-2049-0819</div>
            <div class="hoo-field" role="group">
                <label class="hoo-label " for="toggle-97">Priority Level</label>Low</div>
            <div class="hoo-field" role="group">
                <label class="hoo-label " for="toggle-97">Issue Description</label>Late last night, the coffee machine decided to take a vacation. It now only dispenses lukewarm water and
                    stares blankly at anyone who dares approach.<br><br>The ‘Brew’ button is still intact, but no amount of button-mashing seems to convince it to do its job.
                    Please send help before we resort to using the office kettle and turning into tea drinkers.</div>
            <div class="hoo-field" role="group">
                <label class="hoo-label " for="toggle-97">Reported By</label>Dwight Schrute</div>
            <div class="hoo-field" role="group">
                <label class="hoo-label " for="toggle-97">Date/Time Reported</label><time id="current-time" datetime=""></time>
        </div>
    </fieldset>
</div>
</details>
<section class="review">
    <h2>Review and verify</h2>
    <fieldset id="issue-verification" class="hoo-fieldset no-outline">
        <div class="hoo-field" role="group">
            <label class="hoo-label " for="toggle-97">Assign To</label>
            <input class="hoo-input-text" id="toggle-97"  type="text"  
                        placeholder=""  size='30'>
            <p class="hoo-input-description" id="assigned-to-input-97">Enter the name of the person responsible for resolving the issue.</p>
        </div>
        <div class="hoo-field" role="group">
            <label class="hoo-label " for="toggle-97">Verification Date</label>
            <input type="datetime-local" class="hoo-input-date" name="verification-date-input-name" value="2024-11-21T15:56" min="2018-01-01" max="2030-12-31"    >
        </div>
        <div class="hoo-field" role="group">
            <label class="hoo-label " for="toggle-97">Comments</label>
            <p class="hoo-input-description" >Additional information or notes about the issue. Include any relevant details or observations that may help in resolving the issue. If there are any special instructions or considerations, please include them here.</p>
            <textarea class="hoo-input-text" id="toggle-97"   maxlength='500' minlength='500' style='max-width: 65ch; width: 100%; height: 5lh;'>
            </textarea>
        </div>
        <div class="hoo-field" role="group">
            <label class="hoo-label " for="toggle-97">Estimated Time to Resolve</label>
            <div class="hoo-input-group">
                <input class="hoo-input-text" type="number"  id="toggle-97" 
                            placeholder="" data-suffix="hours"  aria-labelledby="suffix-label-toggle-97" size='10' min='0' max='100'>
                <div id="suffix-label-toggle-97" class="hoo-input-suffix">hours</div>
            </div>
            <p class="hoo-input-description" id="estimate-time-to-resolve-input-97">Estimated time in hours it would take for the issue to be resolved. This should be based on the current state of the asset and the estimated effort required to fix the issue.</p>
        </div>
        <div class="actions">
            <button class="hoo-button"><span class="hoo-button-label">Invalid report</span>
        </button>
        <button class="hoo-button-primary"><span class="hoo-button-label">Report verified</span>
    </button>
</div>
</fieldset>
</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>