<span title="{{ _('Current printer state')|edq }}">{{ _('State') }}</span>: <strong data-test-id="state-string" data-bind="text: stateString"></strong><br>
<span data-bind="visible: isOperational"><span title="{{ _('Count of resend requests, transmitted lines and resend ratio')|edq }}">{{ _('Resend ratio') }}</span>: <strong data-bind="css: {'text-error': resendRatioCritical}"><span title="{{ _('resend requests') | edq }}" data-bind="text: formatHuman(resendCount())"></span> / <span title="{{ _('transmitted lines') | edq }}" data-bind="text: formatHuman(resendTotalTransmitted())"></span> (<span title="{{ _('resend ratio') }}" data-bind="text: resendRatio"></span>%) <a href="https://faq.octoprint.org/communication-errors" target="_blank" class="text-error" data-bind="visible: resendRatioCritical"><i class="fas fa-question-circle"></i></a></strong><br></span>
<hr>
<span title="{{ _('Name of file currently selected for printing')|edq }}">{{ _('File') }}</span>: <strong data-bind="text: filedisplay, attr: {title: filepath}"></strong>&nbsp;<strong data-bind="visible: sd">(SD)</strong><br>
<span title="{{ _('Upload date of the file currently selected or printing')|edq }}">{{ _('Uploaded') }}</span>: <strong data-bind="text: dateString"></strong><br>
<!-- ko if: userString -->
<span title="{{ _('User who selected this file for printing')|edq }}">{{ _('User') }}</span>: <strong data-bind="text: userString"></strong><br>
<!-- /ko -->
<!-- ko if: settings.webcam_timelapseEnabled -->
<span title="{{ _('Current timelapse configuration')|edq }}">{{ _('Timelapse') }}</span>: <strong data-bind="text: timelapseString"></strong><br>
<!-- /ko -->
<!-- ko foreach: filament -->
<span data-bind="text: 'Filament (' + name() + '): ', title: 'Filament usage for ' + name()"></span><strong data-bind="text: formatFilament(data())"></strong><br>
<!-- /ko -->
<span title="{{ _('Estimated total print time based on analysis of the file or past prints')|edq }}">{{ _('Approx. Total Print Time') }}</span>: <strong data-bind="text: estimatedPrintTimeString, attr: {title: estimatedPrintTimeExactString}"></strong><br>
<hr>
<span title="{{ _('Total print time so far')|edq }}">{{ _('Print Time') }}</span>: <strong data-bind="text: printTimeString"></strong><br>
<span title="{{ _('Estimated time until the print job is done. This is only an estimate and accuracy depends heavily on various factors!')|edq }}">{{ _('Print Time Left') }}</span>: <strong data-bind="text: printTimeLeftString, attr: {title: printTimeLeftExactString}"></strong> <span id="state_printtimeleft_popover" style="display: none" data-bind="visible: printTimeLeftOrigin, attr: {title: printTimeLeftOriginString}, css: printTimeLeftOriginClass">&#9679;</span><br>
<span title="{{ _('Bytes printed vs total bytes of file')|edq }}">{{ _('Printed') }}</span>: <strong data-bind="text: byteString"></strong><br>


<div class="progress progress-text-centered">
    <span class="progress-text-back" data-bind="text: progressBarString()"></span>
    <div class="bar" id="job_progressBar" data-bind="style: {width: progressString() + '%'}">
        <span class="progress-text-front" data-bind="copyWidth: ':parent :parent', text: progressBarString()"></span>
    </div>
</div>

<div class="row-fluid print-control" data-bind="visible: $root.loginState.hasPermissionKo($root.access.permissions.PRINT)">
    <button class="btn btn-primary span4" data-bind="click: print, enable: enablePrint, css: {'btn-danger': isPaused()}, attr: {title: titlePrintButton}" id="job_print"><i class="fas" data-bind="css: {'fa-print': !isPaused(), 'fa-undo': isPaused()}"></i> <span data-bind="text: (isPaused() ? '{{ _('Restart')|esq }}' : '{{ _('Print')|esq }}')">{{ _('Print')|esq }}</span></button>
    <button class="btn span4" id="job_pause" data-bind="click: function() { isPaused() ? onlyResume() : onlyPause(); }, enable: enablePause, css: {active: isPaused()}, attr: {title: titlePauseButton}"><i class="fas" data-bind="css: {'fa-pause': !isPaused(), 'fa-play': isPaused()}"></i> <span data-bind="visible: !isPaused()">{{ _('Pause') }}</span><span data-bind="visible: isPaused()">{{ _('Resume') }}</span></button>
    <button class="btn span4" id="job_cancel" data-bind="click: cancel, enable: enableCancel" title="{{ _('Cancels the print job')|edq }}"><i class="fas fa-stop"></i> {{ _('Cancel') }}</button>
</div>
