links/patches/application/admin/view/split/ticket/index.html

<style>
    .split-ticket-sync-pending {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-weight: 600;
        color: #31708f;
        white-space: nowrap;
    }
    .split-ticket-sync-pending .fa-spinner {
        color: #5bc0de;
    }
    .split-ticket-sync-pending .split-ticket-sync-label::after {
        content: '';
        display: inline-block;
        width: 1.2em;
        text-align: left;
        animation: split-ticket-sync-dots 1.4s steps(4, end) infinite;
    }
    .split-ticket-url-group {
        width: 200px;
        max-width: 100%;
        margin: 0;
    }
    .split-ticket-url-group .form-control {
        cursor: default;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        background: #fff;
        height: 30px;
    }
    .split-ticket-url-group .btn {
        height: 30px;
        padding: 5px 10px;
    }
    @keyframes split-ticket-sync-dots {
        0%, 20% { content: ''; }
        40% { content: '.'; }
        60% { content: '..'; }
        80%, 100% { content: '...'; }
    }
    .split-ticket-summary-bar {
        margin: 0 0 10px;
        padding: 10px 14px;
        background: linear-gradient(180deg, #eff6ff 0%, #dbeafe 100%);
        border: 1px solid #93c5fd;
        border-radius: 4px;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px 24px;
        font-size: 13px;
        line-height: 1.5;
    }
    .split-ticket-summary-bar .split-ticket-summary-label {
        font-weight: 700;
        color: #1e40af;
        margin-right: 4px;
    }
    .split-ticket-summary-bar .split-ticket-summary-item em {
        font-style: normal;
        color: #475569;
        margin-right: 6px;
    }
    .split-ticket-summary-bar .split-ticket-summary-item b {
        font-size: 14px;
        color: #0f172a;
    }
    .split-sync-success-normal {
        color: #3c763d;
        font-weight: 600;
    }
    .split-sync-success-stopped {
        color: #a94442;
        font-weight: 600;
    }
    .split-ticket-sync-status-paused {
        color: #8a6d3b;
        font-weight: 600;
        cursor: help;
        border-bottom: 1px dotted #8a6d3b;
    }
    .split-ticket-sync-status-error {
        cursor: help;
        border-bottom: 1px dotted #a94442;
    }
</style>
<div class="panel panel-default panel-intro">
    <div class="panel-heading">
        {:build_heading(null,FALSE)}
    </div>
    <div class="panel-body">
        <div id="myTabContent" class="tab-content">
            <div class="tab-pane fade active in" id="one">
                <div class="widget-body no-padding">
                    <div id="toolbar" class="toolbar">
                        <a href="javascript:;" class="btn btn-primary btn-refresh" title="{:__('Refresh')}"><i class="fa fa-refresh"></i></a>
                        <a href="javascript:;" class="btn btn-success btn-add {:$auth->check('split.ticket/add')?'':'hide'}" title="{:__('Add')}"><i class="fa fa-plus"></i> {:__('Add')}</a>
                        <a href="javascript:;" class="btn btn-success btn-edit btn-disabled disabled {:$auth->check('split.ticket/edit')?'':'hide'}" title="{:__('Edit')}"><i class="fa fa-pencil"></i> {:__('Edit')}</a>
                        <a href="javascript:;" class="btn btn-danger btn-del btn-disabled disabled {:$auth->check('split.ticket/del')?'':'hide'}" title="{:__('Delete')}"><i class="fa fa-trash"></i> {:__('Delete')}</a>
                        <a href="javascript:;" class="btn btn-info btn-sync btn-disabled disabled {:$auth->check('split.ticket/sync')?'':'hide'}" title="{:__('Sync_status_btn')}"><i class="fa fa-refresh"></i> {:__('Sync_status_btn')}</a>
                    </div>
                    <div id="split-ticket-summary" class="split-ticket-summary-bar hide">
                        <span class="split-ticket-summary-label">{:__('Summary row')}</span>
                        <span class="split-ticket-summary-item"><em>{:__('Ticket_total')}</em><b data-sum="ticket_total">0</b></span>
                        <span class="split-ticket-summary-item"><em>{:__('Complete_count')}</em><b data-sum="complete_count">0</b></span>
                        <span class="split-ticket-summary-item"><em>{:__('Ticket_progress')}</em><b data-sum="ticket_progress_text">0.00%</b></span>
                        <span class="split-ticket-summary-item"><em>{:__('Speed_per_hour')}</em><b data-sum="speed_per_hour">0.00</b></span>
                    </div>
                    <table id="table" class="table table-striped table-bordered table-hover table-nowrap"
                           data-operate-edit="{:$auth->check('split.ticket/edit')}"
                           data-operate-del="{:$auth->check('split.ticket/del')}"
                           width="100%">
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>