{if $unread_notices}
<script>

    $('#lms-userpanel-menu-item-notices .warning-icon').addClass('lms-userpanel-icon-warning');

</script>
{/if}

{if $urgent_notice}
    <style>

        @media (min-width: 576px) {
            .modal-dialog {
                max-width: 60vw;
            }
        }

        .modal-content {
            width: fit-content;
        }

        .modal-content img {
            max-width: 80vw;
            max-height: 80vh;
        }

        .modal-body ul {
            margin-block-start: 0;
            margin-block-end: 0;
            list-style-type: none;
            padding-inline-start: 0;
        }

        #urgent-notice-attachments {
            border-top: 1px solid #dee2e6;
        }

    </style>

    <script>

        $(function() {
            $('#urgent-notice-dialog').modal('show');

            $('#urgent-notice-confirm').click(function() {
                $.ajax(
                    '?m=notices&ajax=1&confirm_urgent=' + $(this).attr('data-id'),
                    {
                        dataType: 'json',
                        success: function(data) {
                            $('#urgent-notice-dialog').modal('hide');
                            if (!parseInt(data["unread_notices"])) {
                                $('#lms-userpanel-menu-item-notices .warning-icon').removeClass('lms-userpanel-icon-warning');
                            }
                            if (typeof(data["urgent_notice"]) == 'object') {
                                $('#urgent-notice-dialog').one('hidden.bs.modal', function() {
                                    $('#urgent-notice-confirm').attr('data-id', data["urgent_notice"].id);
                                    cdate = new Date(parseInt(data["urgent_notice"].cdate) * 1000);
                                    $('#urgent-notice-title').html(sprintf("%04d/%02d/%02d %02d:%02d / %s",
                                        cdate.getFullYear(),
                                        cdate.getMonth() + 1,
                                        cdate.getDate(),
                                        cdate.getHours(),
                                        cdate.getMinutes(),
                                        data["urgent_notice"].subject
                                    ));
                                    $('#urgent-notice-body').html(data["urgent_notice"].body);
                                    $('#urgent-notice-dialog').modal('show');
                                });
                            }
                        }
                    }
                );
            });
        });

    </script>

    <div class="container">
        <!-- Modal -->
        <div class="modal fade" id="urgent-notice-dialog" role="dialog">
            <div class="modal-dialog">
                <!-- Modal content-->
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 id="urgent-notice-title" class="modal-title">{$urgent_notice.cdate|date_format:"Y-m-d H:i"} / {$urgent_notice.subject}</h4>
                        {button class="close" data_dismiss="modal" icon="cancel"}
                    </div>
                    <div id="urgent-notice-body" class="modal-body">
                        {$urgent_notice.body}
                    </div>
                    {if !empty($urgent_notice.attachments)}
                        <div id="urgent-notice-attachments" class="modal-body">
                            {icon name="attachment"}
                            <strong>{trans("Attachments")}</strong>
                            <ul>
                                {foreach $urgent_notice.attachments as $attachmentid => $attachment}
                                    <li>
                                        <a href="?m=notices&f=attachmentview&id={$attachmentid}">
                                            {$attachment.filename|escape}
                                            {if preg_match('/pdf/', $attachment.contenttype)}
                                                {$icon = "pdf"}
                                            {elseif preg_match('/csv|excel|spreadsheet/', $attachment.contenttype)}
                                                {$icon = "xls"}
                                            {/if}
                                            {icon name="lms-ui-icon-view" class=$icon}
                                        </a>
                                    </li>
                                {/foreach}
                            </ul>
                        </div>
                    {/if}
                    <div class="modal-footer">
                        {button id="urgent-notice-confirm" data_id="{$urgent_notice.id}" class="btn btn-primary" icon="confirm" label="<!userpanel>Confirm"}
                    </div>
                </div>
            </div>
        </div>
    </div>
{/if}
