<%= turbo_stream_from 'operator_jobs' %>
<% content_for :title, "Current Print Jobs" %>
<div class="grid gap-4 grids-cols-2">
</div>
<div class="flex space-x-4 justify-items-center">
  <%= render partial: "job_status_card", locals: { jobs: @openjobs, status: :open } %>
  <%= render partial: "job_status_card", locals: { jobs: @printingjobs, status: :printing } %>
  <%= render partial: "job_status_card", locals: { jobs: @pickupjobs, status: :pickup } %>
  <%= render partial: "job_status_card", locals: { jobs: @paidjobs, status: :paid } %>
  <%= render partial: "job_status_card", locals: { jobs: @canceledjobs, status: :canceled } %>
</div>
<div class="w-full">
  <div id="printingjobs-h" class="flex items-center justify-between py-4">
    <h1 class="text-3xl font-bold text-hsrm-gray">
      <%= icon(status_icon(:printing), class: "icon") %>
      Printing
    </h1>
    <div class="flex gap-2">
      <div id="start_manual_job_btn">
        <%= link_to icon("plus-circle", class: "icon icon-nohover size-6 mr-2", title: "Druckauftrag erstellen") + "Druckauftrag erstellen" , new_operator_job_path, class: "btn block bg-green-400 text-black" %>
      </div>
      <%= render partial: 'start_next_job_btn', locals: { jobs: @openjobs } %>
    </div>
  </div>
  <%# render partial: "job_card", collection: @printingjobs, as: :job %>
  <div class="min-w-full overflow-auto shadow-lg">
    <table class="w-full py-8 bg-white table-auto">
      <thead class="font-semibold tracking-wide bg-gray-200 border-b-2 border-gray-300 text text-hsrm-gray">
        <tr>
          <th class="w-1 p-2 py-3 text-center"> ID </th>
          <th class="w-1 p-2 py-3 text-center"> Vorschau </th>
          <th class="w-1 p-2 py-3 text-left"> Auftraggeber </th>
          <th class="p-2 py-3 text-left"> PDF </th>
          <th class="w-1 p-1 py-3 text-left"> A0 </th>
          <th class="w-1 p-1 py-3 text-left"> A1 </th>
          <th class="w-1 p-1 py-3 text-left"> A2 </th>
          <th class="w-1 p-1 py-3 text-left"> A3 </th>
          <th class="w-1 p-2 py-3 text-center text-nowrap"> no DIN </th>
          <th class="w-1 p-2 py-3 text-center"> Kosten </th>
          <th class="w-1 p-2 py-3 text-center"> Status </th>
          <th class="w-1 p-2 py-3 text-center">Action</th>
        </tr>
      </thead>
      <tbody id='printingjobs' class="divide-y divivde-gray-300">
        <%= render partial: "job_tr", collection: @printingjobs, as: :job %>
        <%#= link_to "Show this job", job, class: "ml-2 rounded-lg py-3 px-5 bg-gray-100 inline-block font-medium" %>
      </tbody>
    </table>
  </div>
  <div id="pickupjobs-h" class="flex items-center justify-between py-4">
    <h1 class="text-3xl font-bold text-hsrm-gray">
      <%= icon(status_icon(:pickup), class: "icon") %>
      Pickup 
    </h1>
  </div>
  <div class="min-w-full overflow-auto shadow-lg">
    <table class="w-full py-8 bg-white table-auto">
      <thead class="font-semibold tracking-wide bg-gray-200 border-b-2 border-gray-300 text text-hsrm-gray">
        <tr>
          <th class="w-1 p-2 py-3 text-center"> ID </th>
          <th class="w-1 p-2 py-3 text-center"> Vorschau </th>
          <th class="w-1 p-2 py-3 text-left"> Auftraggeber </th>
          <th class="p-2 py-3 text-left"> PDF </th>
          <th class="w-1 p-1 py-3 text-left"> A0 </th>
          <th class="w-1 p-1 py-3 text-left"> A1 </th>
          <th class="w-1 p-1 py-3 text-left"> A2 </th>
          <th class="w-1 p-1 py-3 text-left"> A3 </th>
          <th class="w-1 p-2 py-3 text-center text-nowrap"> no DIN </th>
          <th class="w-1 p-2 py-3 text-center"> Kosten </th>
          <th class="w-1 p-2 py-3 text-center"> Status </th>
          <th class="w-1 p-2 py-3 text-center">Action</th>
        </tr>
      </thead>
      <tbody id='pickupjobs' class="divide-y divivde-gray-300">
        <%= render partial: "job_tr", collection: @pickupjobs, as: :job %>
        <%#= link_to "Show this job", job, class: "ml-2 rounded-lg py-3 px-5 bg-gray-100 inline-block font-medium" %>
      </tbody>
    </table>
  </div>
  <div id="openjobs-h" class="flex items-center justify-between py-4">
    <h1 class="text-3xl font-bold text-hsrm-gray">
      <%= icon(status_icon(:open), class: "icon") %>
      Open 
    </h1>
  </div>
  <div class="min-w-full overflow-auto shadow-lg">
    <table class="w-full py-8 bg-white table-auto">
      <thead class="font-semibold tracking-wide bg-gray-200 border-b-2 border-gray-300 text text-hsrm-gray">
        <tr>
          <th class="w-1 p-2 py-3 text-center"> ID </th>
          <th class="w-1 p-2 py-3 text-center"> Vorschau </th>
          <th class="w-1 p-2 py-3 text-left"> Auftraggeber </th>
          <th class="p-2 py-3 text-left"> PDF </th>
          <th class="w-1 p-1 py-3 text-left"> A0 </th>
          <th class="w-1 p-1 py-3 text-left"> A1 </th>
          <th class="w-1 p-1 py-3 text-left"> A2 </th>
          <th class="w-1 p-1 py-3 text-left"> A3 </th>
          <th class="w-1 p-2 py-3 text-center text-nowrap"> no DIN </th>
          <th class="w-1 p-2 py-3 text-center"> Kosten </th>
          <th class="w-1 p-2 py-3 text-center"> Status </th>
          <th class="w-1 p-2 py-3 text-center">Action</th>
        </tr>
      </thead>
      <tbody id='openjobs' class="divide-y divivde-gray-300">
        <%= render partial: "job_tr", collection: @openjobs, as: :job %>
        <%#= link_to "Show this job", job, class: "ml-2 rounded-lg py-3 px-5 bg-gray-100 inline-block font-medium" %>
      </tbody>
    </table>
  </div>
  <div id="paidcanceledjobs-h" class="flex items-center justify-between py-4">
    <h1 class="text-3xl font-bold text-hsrm-gray">
      <%= icon(status_icon(:paid), class: "icon") %>
      <%= icon(status_icon(:canceled), class: "icon") %>
      Paid/Canceled 
    </h1>
  </div>
  <div class="min-w-full overflow-auto shadow-lg">
    <table class="w-full py-8 bg-white table-auto">
      <thead class="font-semibold tracking-wide bg-gray-200 border-b-2 border-gray-300 text text-hsrm-gray">
        <tr>
          <th class="w-1 p-2 py-3 text-center"> ID </th>
          <th class="w-1 p-2 py-3 text-center"> Vorschau </th>
          <th class="w-1 p-2 py-3 text-left"> Auftraggeber </th>
          <th class="p-2 py-3 text-left"> PDF </th>
          <th class="w-1 p-1 py-3 text-left"> A0 </th>
          <th class="w-1 p-1 py-3 text-left"> A1 </th>
          <th class="w-1 p-1 py-3 text-left"> A2 </th>
          <th class="w-1 p-1 py-3 text-left"> A3 </th>
          <th class="w-1 p-2 py-3 text-center text-nowrap"> no DIN </th>
          <th class="w-1 p-2 py-3 text-center"> Kosten </th>
          <th class="w-1 p-2 py-3 text-center"> Status </th>
          <th class="w-1 p-2 py-3 text-center">Action</th>
        </tr>
      </thead>
      <tbody id='paidcanceledjobs' class="divide-y divivde-gray-300">
        <%= render partial: "job_tr", collection: @paidcanceledjobs, as: :job %>
        <%#= link_to "Show this job", job, class: "ml-2 rounded-lg py-3 px-5 bg-gray-100 inline-block font-medium" %>
      </tbody>
    </table>
  </div>
</div>
