<div class="card shadow-float max-w-full lg:min-w-[500px]">
  <div class="head justify-between">
    <h3>
      <div class="js-nok  hidden badge CRITICAL text-left"><i class="fa-solid fa-exclamation"></i>Failed</div>
      <div class="js-ok   hidden badge OK text-left"><i class="fa-solid fa-check"></i> Success</div>
      <div class="js-warn hidden badge WARNING text-left"><i class="fa-solid fa-exclamation"></i> Warning</div>
      <div class="js-run  hidden badge text-left"><div class="spinner"></div>Running</div>
      [% IF job.defined("message"); job.message; ELSE; "Job: " _ job.id; END %]
    </h3>
    <button class="iconOnly medium hoverable" onClick="closeModalWindow(); return false;"><i class="uil uil-times"></i></button>
  </div>
  <div class="body">
    [% text = "" %]
    [% IF job.defined("stdout"); text = job.stdout; END %]
    [% IF job.defined("stderr"); text = text _ job.stderr; END %]
    <div class='CONSOLE p-1 overflow-y-scroll min-w-[300px] max-w-full lg:max-w-[1000px] min-h-[150px] max-h-[500px]' id='job_popup_[% job.id %]'>
      [% FOREACH line = text.split("\n") %]
        <div class="whitespace-pre">[% line %]</div>
      [% END %]
    </div>
  <div class='footer'>
    <button class='w-24 mx-auto js-close' onclick='return(closeModalWindow());' title="job will continue in background">Close</button>
  </div>
</div>

<script>
  showJobOutputPopupUpdate("[% job.id %]", "[% peer %]", "job_popup_[% job.id %]", [% json_encode(job) %]);
</script>