<div class="page-header">
    <h3 class="page-title">Log Details</h3>
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="/" class="text-decoration-none">Dashboard</a></li>
            <li class="breadcrumb-item"><a href="/logs" class="text-decoration-none">Logs</a></li>
            <li class="breadcrumb-item active" aria-current="page">Log Details</li>
        </ol>
    </nav>
</div>
<div class="card">
    <div class="card-body">
        <h4 class="card-title">Log Details</h4>
        <div class="row">
            <div class="col-lg-6">
                <table class="table table-borderless">
                    <tbody>
                        <tr>
                            <th>To</th>
                            <td>
                                <% if(data.to && data.to.length) { %>
                                    <% data.to.forEach(function(record) { %>
                                        <span class="badge badge-primary mr-1 rounded-5">
                                            <%= record %>
                                        </span>
                                        <% }) %>
                                            <% }else{ %>
                                                -
                                                <% } %>
                            </td>
                        </tr>
                        <tr>
                            <th>CC</th>
                            <td>
                                <% if(data.cc && data.cc.length) { %>
                                    <% data.cc.forEach(function(record) { %>
                                        <span class="badge badge-primary mr-1 rounded-5">
                                            <%= record %>
                                        </span>
                                        <% }) %>
                                            <% }else{ %>
                                                -
                                                <% } %>
                            </td>
                        </tr>
                        <tr>
                            <th>Subject</th>
                            <td>
                                <%= data.subject || '-' %>
                            </td>
                        </tr>
                        <tr>
                            <th>Status</th>
                            <td>
                                <% if (data.status==EMAIL_STATUS.SENT) { %>
                                    <span class="badge badge-success text-capitalize"
                                        id="status-<%=data._id%>">Sent</span>
                                    <% } else if (data.status==EMAIL_STATUS.FAILED) { %>
                                        <span class="badge badge-danger text-capitalize"
                                            id="status-<%=data._id%>">Failed</span>
                                        <% } else if (data.status==EMAIL_STATUS.IN_PROGRESS) { %>
                                            <span class="badge badge-info text-capitalize" id="status-<%=data._id%>">In
                                                Progress<div class="spinner-border spinner-border-xsm ms-1"
                                                    role="status"></div>
                                            </span>

                                            <% }else{ %>
                                                <span class="badge badge-warning text-capitalize"
                                                    id="status-<%=data._id%>">
                                                    Pending
                                                </span>
                                                <% } %>

                            </td>
                        </tr>
                        <tr>
                            <th>Attachments</th>
                            <td>
                                <div style="text-wrap: balance;">
                                    <% if(data.attachments && data.attachments.length) { %>
                                        <% data.attachments.forEach(function(record) { %>
                                            <a class="badge badge-info m-1 rounded-5 text-decoration-none"
                                                target="_blank" href="<%= record.url %>">
                                                <%= record.name %>
                                            </a>
                                            <% }) %>
                                                <% }else{ %>
                                                    -
                                                    <% } %>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <th>Body</th>
                        </tr>
                    </tbody>
                </table>
                <div class="card border">
                    <div class="card-body">
                        <%- data.body || '-' %>
                    </div>
                </div>
            </div>
        </div>

        <a href="/logs" class="btn btn-light mt-4">Back</a>
    </div>
</div>

<script>
    $(document).ready(function () {
        socket.on('emailStatusUpdated', function (data) {
            if (data.status == "<%=EMAIL_STATUS.SENT%>") {
                $("#status-" + data._id).attr("class", "badge badge-success text-capitalize");
                $("#status-" + data._id).html(data.status);
            }
            else if (data.status == "<%=EMAIL_STATUS.FAILED%>") {
                $("#status-" + data._id).attr("class", "badge badge-danger text-capitalize");
                $("#status-" + data._id).html(data.status);
            }
            else if (data.status == "<%=EMAIL_STATUS.IN_PROGRESS%>") {
                $("#status-" + data._id).attr("class", "badge badge-info text-capitalize");
                $("#status-" + data._id).html(`In Progress<div class="spinner-border spinner-border-xsm ms-1" role="status"></div>`);
            }

        });
    });
</script>