<script setup>
const props = defineProps({
  invoice: {
    type: Object,
    default: () => ({})
  }
})
</script>

<template>
  <table class="travel_allowance">
      <tr><td colspan="2">
          Abrechnung einer Reisekostenpauschale
      </td></tr>
      <tr>
          <th>Reiseroute</th>
          <td>{{props.invoice.travelRoute}}</td>
      </tr>

      <tr>
          <th>Grund der Reise</th>
          <td>{{props.invoice.travelReason}}</td>
      </tr>

    <tr>
      <th>Gesamte Wegstrecke</th>
      <td>{{props.invoice.distance}} km</td>
    </tr>

    <tr>
      <th>Kilometerpauschale</th>
      <td>{{props.invoice.distanceAllowance}} Euro  / km</td>
    </tr>

      <tr>
          <th>Gesamtbetrag</th>
          <td style="font-weight: bold">{{props.invoice.amount}}</td>
      </tr>

      <tr>
      <th>Marterialtransport</th>
      <td>{{props.invoice.transportation}}</td>
    </tr>

    <tr>
      <th>Hat Personen mitgenommen</th>
      <td>{{props.invoice.passengers}}</td>
    </tr>
  </table>

</template>

<style scoped>
    .travel_allowance {
        border-spacing: 0;
    }

    .travel_allowance tr th {
        width: 300px !important;
        border-left: 1px solid #ccc;
        padding-left: 20px;
    }

    .travel_allowance tr td,
    .travel_allowance tr th  {
        font-family: sans-serif;
        line-height: 1.8em;
        border-bottom: 1px solid #ccc;
        padding: 10px;
    }

    .travel_allowance tr td:last-child {
        border-right: 1px solid #ccc;
    }

    .travel_allowance tr:first-child td:first-child {
        margin-bottom: 10px;
        font-weight: bold;
        background: linear-gradient(to bottom, #fff, #f6f7f7);
        border-top: 1px solid #ccc;
        border-left: 1px solid #ccc !important;
    }
</style>
