<div class="ui segment">
    <div>
        <div class="ui action fluid">
            <button onclick="updateButton(this,'0xSS')" class="ui red left labeled icon button">
                <i class="image outline icon"></i>
                Take Screenshot
            </button>
        </div>
    </div>

    <table class="ui fixed celled table">

        <thead>
            <tr>
                <th>Time</th>
                <th>Name</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody>
            <% pageData.forEach((item) => { 
                let date = new Date(item.time);
            %>
            <tr>
                <td class="collapsing"><%= date.toLocaleString('en-GB', { timeZone: 'UTC' }) %></td>
                <td><%= item.originalName %></td>
                <td class="collapsing">
                    <div class="ui buttons">
                        <button onclick="view_image('<%= item.path %>')" class="ui button blue">View</button>
                        <div class="or"></div>
                        <a href="<%= item.path %>" download="<%= item.originalName %>"
                            class="ui positive button">Save</a>
                    </div>
                </td>
            </tr>
            <% }) %>
        </tbody>
    </table>

    <div class="ui segment">
        <img id="images" class="ui centered small image" src="">
    </div>

    <script>
        function view_image(path) {
            $("#images").attr("src",path);
        }
    </script>

</div>
