<span title="{{ _('Current printer state')|edq }}">{{ _('State') }}</span>: <strong data-test-id="state-string" data-bind="text: stateString"></strong> <a href="javascript:void(0)" class="text-error" data-bind="visible: errorInfoAvailable, click: function() { showFirmwareErrorModal() }"><i class="fas fa-exclamation-circle"></i></a><br>
<span data-bind="visible: hasErrorString" class="text-error"><span data-test-id="error-string" data-bind="text: errorString"></span><br></span>
<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')|edq }}" 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}" data-test-id="selected-file-string"></strong>&nbsp;<strong data-bind="visible: sd" data-test-id="selected-file-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: _.sprintf(gettext('Filament (%(name)s)'), { name: name() }), attr: {title: _.sprintf(gettext('Filament usage for %(name)s'), {name: 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">
    <div class="bar" id="job_progressBar" data-bind="style: {width: progressString() + '%'}"></div>
    <span class="progress-text-back" data-bind="css: { 'progress-text-front': (progressString() >= 50), 'progress-text-back': (progressString() < 50) }, text: progressBarString()"></span>
</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') }}</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>
