@@ -188,8 +188,10 @@ $GLOBALS['TL_DCA']['tl_vr_wa_reservation'] = array

         'approved' => array

         (

             'exclude'                 => true,

-            'inputType'               => 'checkbox',

-            'eval'                    => array('tl_class'=>'w50 m12'),

+            'inputType'               => 'select',

+            'options'                 => ['1','0'],

+            'reference'               => $GLOBALS['TL_LANG']['REF']['wa_approval'],

+            'eval'                    => array('tl_class'=>'w50 m12', 'includeBlankOption' => true, 'blankOptionLabel' => $GLOBALS['TL_LANG']['MSC']['wa_approval_pending']),

             'sql'                     => "char(1) NOT NULL default '1'"

         ),

         'approved_on' => array

@@ -11,8 +11,14 @@

 $GLOBALS['TL_LANG']['MSC']['wa_sorte'] = 'Rebsorte';

 $GLOBALS['TL_LANG']['MSC']['wa_leseart'] = 'Leseart';

 $GLOBALS['TL_LANG']['MSC']['wa_approval_needed'] = 'erfordert Freigabe';

+$GLOBALS['TL_LANG']['MSC']['wa_approval_pending'] = 'Freigabe ausstehend';

 $GLOBALS['TL_LANG']['REF']['wa_ernteart'] = [

     'handlese' => 'Handlese',

     'vollernter' => 'Vollernter',

 ];

+

+$GLOBALS['TL_LANG']['REF']['wa_approval'] = [

+    '0' => 'abgelehnt',

+    '1' => 'angenommen',

+];

@@ -10,8 +10,15 @@

 $GLOBALS['TL_LANG']['MSC']['wa_sorte'] = 'Grape variety';

 $GLOBALS['TL_LANG']['MSC']['wa_leseart'] = 'Harvest type';

+$GLOBALS['TL_LANG']['MSC']['wa_approval_needed'] = 'approval needed';

+$GLOBALS['TL_LANG']['MSC']['wa_approval_pending'] = 'approval pending';

 $GLOBALS['TL_LANG']['REF']['wa_ernteart'] = [

     'handlese' => 'Manual harvest',

     'vollernter' => 'Harvester',

 ];

+

+$GLOBALS['TL_LANG']['REF']['wa_approval'] = [

+    '0' => 'denied',

+    '1' => 'approved',

+];

@@ -72,7 +72,20 @@

                     <h4>Ihre Reservierungen</h4>

                     <ul class="no-bullets mx-0 reservations">

                         {% for reservation in reservations %}

-                            <li class="row u-items-center p-0">

+                            {% if reservation.approved == '1' %}

+                                {% set status = 'approved' %}

+                            {% elseif reservation.approved == '0' %}

+                                {% set status = 'canceled' %}

+                            {% else %}

+                                {% set status = 'pending' %}

+                            {% endif %}

+

+                            <li class="row u-items-center p-0 status status--{{ status }}">

+                                <div class="col-1">

+                                    <div class="u-flex u-items-center u-gap-1">

+                                        <i class="status-icon">Blah</i>

+                                    </div>

+                                </div>

                                 <div class="col-2">

                                     <div class="u-flex u-items-center u-gap-1">

                                         <i class="icon-behaelter-outline"></i>

@@ -91,6 +104,21 @@

                             </li>

                         {% endfor %}

                     </ul>

+                    <div class="u-flex u-items-center u-gap-2 px-1 text-sm">

+                        <div><strong>Legende:</strong></div>

+                        <div class="u-flex u-items-center u-gap-1">

+                            <i class="status-icon status--approved status--small"></i>

+                            angenommen

+                        </div>

+                        <div class="u-flex u-items-center u-gap-1">

+                            <i class="status-icon status--pending status--small"></i>

+                            Freigabe ausstehend

+                        </div>

+                        <div class="u-flex u-items-center u-gap-1">

+                            <i class="status-icon status--canceled status--small"></i>

+                            abgelehnt

+                        </div>

+                    </div>

                 </div>

             {% endif %}

@@ -211,3 +211,100 @@ ul {

 .ml-auto {

   margin-left: auto;

 }

+

+/** Status icons */

+

+.status {

+

+  .status-icon {

+    visibility: hidden;

+    position: relative;

+    width: 24px;

+    height: 24px;

+

+    &:after {

+      width: 24px;

+      height: 24px;

+      visibility: visible;

+      position: absolute;

+      top: 50%;

+      left: 50%;

+      margin: -12px 0 0 -12px;

+      content: '';

+      background-position: 50% 50%;

+      background-repeat: no-repeat;

+    }

+

+  }

+}

+.status-icon {

+  visibility: hidden;

+  position: relative;

+  display: inline-block;

+  width: 24px;

+  height: 24px;

+

+  &:after {

+    width: 24px;

+    height: 24px;

+    visibility: visible;

+    position: absolute;

+    top: 50%;

+    left: 50%;

+    margin: -12px 0 0 -12px;

+    content: '';

+    background-position: 50% 50%;

+    background-repeat: no-repeat;

+  }

+

+  &.status--small,

+  .status.status--small & {

+    &,

+    &:after {

+      width: 16px;

+      height: 16px;

+    }

+    &:after {

+      margin: -8px 0 0 -8px;

+    }

+  }

+}

+

+.status,

+.status-icon {

+  &.status--approved {

+    &:not(.status-icon):not(.status-no-rowcolor) {

+      background-color: #f3ffe2;

+    }

+    &:not(.status),

+    .status-icon {

+      &:after {

+        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='icon icon-tabler icon-tabler-thumb-up' width='100%25' height='100%25' viewBox='0 0 24 24' stroke-width='1.5' stroke='%2300b341' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M7 11v8a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1v-7a1 1 0 0 1 1 -1h3a4 4 0 0 0 4 -4v-1a2 2 0 0 1 4 0v5h3a2 2 0 0 1 2 2l-1 5a2 3 0 0 1 -2 2h-7a3 3 0 0 1 -3 -3' /%3E%3C/svg%3E");

+      }

+    }

+  }

+

+  &.status--pending {

+    &:not(.status-icon):not(.status-no-rowcolor) {

+      background-color: #fff6e4;

+    }

+    &:not(.status),

+    .status-icon {

+      &:after {

+        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='icon icon-tabler icon-tabler-hourglass-high' width='100%25' height='100%25' viewBox='0 0 24 24' stroke-width='1.5' stroke='%23ff9300' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M6.5 7h11' /%3E%3Cpath d='M6 20v-2a6 6 0 1 1 12 0v2a1 1 0 0 1 -1 1h-10a1 1 0 0 1 -1 -1z' /%3E%3Cpath d='M6 4v2a6 6 0 1 0 12 0v-2a1 1 0 0 0 -1 -1h-10a1 1 0 0 0 -1 1z' /%3E%3C/svg%3E");

+      }

+    }

+  }

+

+  &.status--canceled {

+    &:not(.status-icon):not(.status-no-rowcolor) {

+      background-color: #ffe7e7;

+    }

+    &:not(.status),

+    .status-icon {

+      &:after {

+        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='icon icon-tabler icon-tabler-thumb-down' width='100%25' height='100%25' viewBox='0 0 24 24' stroke-width='1.5' stroke='%23ff2825' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M7 13v-8a1 1 0 0 0 -1 -1h-2a1 1 0 0 0 -1 1v7a1 1 0 0 0 1 1h3a4 4 0 0 1 4 4v1a2 2 0 0 0 4 0v-5h3a2 2 0 0 0 2 -2l-1 -5a2 3 0 0 0 -2 -2h-7a3 3 0 0 0 -3 3' /%3E%3C/svg%3E");

+      }

+    }

+  }

+}