<!--{% comment "Vue template!" %}-->
<!--The code in this file is using Vue 3 template syntax and not the DJANGO template syntax.-->
<!--{% endcomment %}-->
<!--{% verbatim %}-->
<div
  :draggable="editable ? 'true' : 'false'"
  class="card"
  :class="
      (mode === 'calendarweek' || mode === 'calendarday') && calendarmode === 'duration'
        ? 'calendar-event-inner '
        : isSelected(opplan.reference)
          ? 'active '
          : store.isChanged(opplan.reference, null) ? 'dirty' : ''
        "
  :style="{ 'overflow-y': 'hidden', 'background-color': opplan.color }"
  :data-index="props.opplan_index"
  :data-reference="opplan.id || opplan.reference"
>
  <div v-if="opplan.type === 'PO'">
    <p>
      <span
        v-if="store.isChanged(opplan.reference, null)  && !isSelected(opplan.reference)"
        class="badge bg-danger float-end"
      >
        {{ttt('unsaved')}}
      </span>
      <i
        class="fa fa-shopping-cart"
        data-bs-toggle="tooltip"
        data-bs-html="true"
        :title="ttt('Purchase Order')"
      ></i
      >&nbsp;
      <strong>{{ opplan.operationplan__reference || opplan.reference }}</strong
      >&nbsp;
      <i
        v-if="!editable || !isSelected(opplan.reference)"
        class="fa"
        :class="displayStatusIcon(opplan)"
        aria-hidden="true"
      ></i>
      <span
        class="btn-group"
        role="group"
        v-if="editable && isSelected(opplan.reference)"
      >
        <button
          v-for="s in ['proposed','approved','confirmed','completed','closed']"
          :key="s"
          type="button"
          class="btn btn-sm btn-primary"
          :class="[getStatus(opplan) === s ? 'active' : '', store.isChanged(opplan.reference, 'status') && s === opplan.status ? 'btn-danger' : '']"
          data-bs-toggle="tooltip"
          data-bs-html="true"
          :title="ttt(s)"
          :disabled="actions.hasOwnProperty('erp_incr_export') || !editable"
          @click="setStatus(opplan, s)"
        >
          <i class="fa" :class="getStatusIcon(s)"></i>
        </button>
      </span>
    </p>
    <p
      v-if="(opplan.item__description || opplan.operationplan__item__description) && editable && isSelected(opplan.reference)"
    >
      <span
        v-if="store.isChanged(opplan.reference, null)  && !isSelected(opplan.reference)"
        class="badge bg-danger float-end"
      >
        class="badge bg-danger float-end"> {{ttt('unsaved')}}
      </span>
      <span class="text-truncate d-inline-block" style="max-width: 180px; vertical-align: middle;"
            data-bs-toggle="tooltip" data-bs-html="true"
            :title="opplan.item__description || opplan.operationplan__item__description">
        {{ opplan.item__description || opplan.operationplan__item__description }}
      </span>&nbsp;
    </p>
    <p>
      {{ opplan.location }}&nbsp;
      <a
        @click.stop=""
        :href="urlPrefix + '/detail/input/location/' + adminEscape(opplan.location) + '/'"
      >
        <i class="fa fa-caret-right"></i>
      </a>
    </p>
    <p>
      <span class="text-truncate d-inline-block" style="max-width: 180px; vertical-align: middle;"
            data-bs-toggle="tooltip" data-bs-html="true"
            :title="opplan.operationplan__supplier || opplan.supplier || opplan.operationplan__supplier__name">
        {{ opplan.operationplan__supplier || opplan.supplier ||
        opplan.operationplan__supplier__name }}
      </span>&nbsp;
      <a
        @click.stop=""
        :href="urlPrefix + '/detail/input/supplier/' + adminEscape(opplan.operationplan__supplier || opplan.supplier || opplan.operationplan__supplier__name) + '/'"
      >
        <i class="fa fa-caret-right"></i>
      </a>
    </p>
    <p
      :class="(opplan.hasOwnProperty('quantityOriginal') || opplan.hasOwnProperty('operationplan__quantityOriginal'))?'dirty': ''"
    >
      <div class="row gx-2">
        <div class="col">
          <span v-if="!editable || !isSelected(opplan.reference)"
                data-bs-toggle="tooltip" data-bs-html="true"
                :title="ttt('Quantity')"
            >{{ numberFormat(opplan.operationplan__quantity || opplan.quantity)
            }}</span
          >
          <input
            class="form-control form-control-sm"
            data-bs-toggle="tooltip" data-bs-html="true"
            :title="ttt('Quantity')"
            :class="store.isChanged(opplan.reference, 'quantity') ? 'ng-dirty' : ''"
            v-if="
                editable &&
                isSelected(opplan.reference) &&
                opplan.hasOwnProperty('quantity')
              "
            type="number"
            step="0"
            min="0"
            @focus="oldValue = opplan.quantity"
            v-model="opplan.quantity"
            @input="changeCard(opplan, 'quantity', oldValue, opplan.quantity)"
          />
          <input
            class="form-control form-control-sm"
            data-bs-toggle="tooltip" data-bs-html="true"
            :title="ttt('Quantity')"
            :class="store.isChanged(opplan.reference, 'operationplan__quantity') ? 'ng-dirty' : ''"
            v-if="
                editable &&
                isSelected(opplan.reference) &&
                opplan.hasOwnProperty('operationplan__quantity')
              "
            type="number"
            step="0"
            min="0"
            @focus="oldValue = opplan.operationplan__quantity"
            v-model="opplan.operationplan__quantity"
            @input="changeCard(opplan, 'operationplan__quantity', oldValue, opplan.operationplan__quantity)"
          />
        </div>
        <div class="col">
        </div>
      </div>
    </p>
    <p
      :class="
          (
            opplan.hasOwnProperty('startdateOriginal') ||
            opplan.hasOwnProperty('operationplan__startdateOriginal') ||
            opplan.hasOwnProperty('enddateOriginal') ||
            opplan.hasOwnProperty('operationplan__enddateOriginal')
          )
            ? 'dirty'
            : ''
        "
    >
      <div class="row gx-2">
        <div class="col">
          <span v-if="!editable || !isSelected(opplan.reference)"
                data-bs-toggle="tooltip" data-bs-html="true"
                :title="ttt('Start date')">
            {{ dateFormat(opplan.operationplan__startdate || opplan.startdate) }}
          </span>
          <input
            class="form-control form-control-sm"
            data-bs-toggle="tooltip" data-bs-html="true"
            :title="ttt('Start date')"
            :class="store.isChanged(opplan.reference, 'startdate') ? 'ng-dirty' : ''"
            v-if="
                editable &&
                isSelected(opplan.reference) &&
                !opplan.hasOwnProperty('operationplan__startdate')
              "
            type="datetime-local"
            @focus="oldValue = opplan.startdate"
            v-model="opplan.startdate"
            @input="changeCard(opplan, 'startdate', oldValue, opplan.startdate)"
          />
          <input
            class="form-control form-control-sm"
            data-bs-toggle="tooltip" data-bs-html="true"
            :title="ttt('Start date')"
            :class="store.isChanged(opplan.reference, 'operationplan__startdate') ? 'ng-dirty' : ''"
            v-if="
                editable &&
                isSelected(opplan.reference) &&
                opplan.hasOwnProperty('operationplan__startdate')
              "
            type="datetime-local"
            @focus="oldValue = opplan.operationplan__startdate"
            v-model="opplan.operationplan__startdate"
            @input="
                changeCard(
                  opplan,
                  'operationplan__startdate',
                  oldValue,
                  opplan.operationplan__startdate
                )
              "
          />
        </div>
        <div class="col">
          <span v-if="!editable || !isSelected(opplan.reference)"
                data-bs-toggle="tooltip" data-bs-html="true"
                :title="ttt('End date')">
            {{ dateFormat(opplan.operationplan__enddate || opplan.enddate) }}
          </span>
          <input
            class="form-control form-control-sm"
            data-bs-toggle="tooltip" data-bs-html="true"
            :title="ttt('End date')"
            :class="store.isChanged(opplan.reference, 'enddate') ? 'ng-dirty' : ''"
            v-if="
                editable &&
                isSelected(opplan.reference) &&
                !opplan.hasOwnProperty('operationplan__enddate')
              "
            type="datetime-local"
            @focus="oldValue = opplan.enddate"
            v-model="opplan.enddate"
            @input="changeCard(opplan, 'enddate', oldValue, opplan.enddate)"
          />
          <input
            class="form-control form-control-sm"
            data-bs-toggle="tooltip" data-bs-html="true"
            :title="ttt('End date')"
            :class="store.isChanged(opplan.reference, 'operationplan__enddate') ? 'ng-dirty' : ''"
            v-if="
                editable &&
                isSelected(opplan.reference) &&
                opplan.hasOwnProperty('operationplan__enddate')
              "
            type="datetime-local"
            @focus="oldValue = opplan.operationplan__enddate"
            v-model="opplan.operationplan__enddate"
            @input="
                changeCard(opplan, 'operationplan__enddate', oldValue, opplan.operationplan__enddate)
              "
          />
        </div>
      </div>
    </p>
    <p v-if="isSelected(opplan.reference) || (opplan.remark || opplan.operationplan__remark)">
      <span v-if="(!editable || !isSelected(opplan.reference)) && ((opplan.remark && opplan.remark.length > 0) || (opplan.operationplan__remark && opplan.operationplan__remark.length > 0))"
        class="text-truncate d-inline-block" style="max-width: 180px; vertical-align: middle;"
        data-bs-toggle="tooltip" data-bs-html="true"
        :title="opplan.remark || opplan.operationplan__remark"
      >{{ opplan.remark || opplan.operationplan__remark }}</span
      >
      <input
        class="form-control form-control-sm"
        data-bs-toggle="tooltip" data-bs-html="true"
        :title="ttt('Remark')"
        :class="store.isChanged(opplan.reference, 'remark') ? 'ng-dirty' : ''"
        v-if="
            editable &&
            isSelected(opplan.reference) &&
            !opplan.hasOwnProperty('operationplan__remark')
          "
        @focus="oldValue = opplan.remark"
        v-model="opplan.remark"
        @input="changeCard(opplan, 'remark', oldValue, opplan.remark)"
      />
      <input
        class="form-control form-control-sm"
        data-bs-toggle="tooltip" data-bs-html="true"
        :title="ttt('Remark')"
        :class="store.isChanged(opplan.reference, 'operationplan__remark') ? 'ng-dirty' : ''"
        v-if="
            editable &&
            isSelected(opplan.reference) &&
            opplan.hasOwnProperty('operationplan__remark')
          "
        @focus="oldValue = opplan.operationplan__remark"
        v-model="opplan.operationplan__remark"
        @input="
            changeCard(opplan, 'operationplan__remark', oldValue, opplan.operationplan__remark)
          "
      />
    </p>
  </div>
  <div v-if="(opplan.type || opplan.operationplan__type || type) === 'DO'">
    <p>
      <span
        v-if="store.isChanged(opplan.reference, null)  && !isSelected(opplan.reference)"
        class="badge bg-danger float-end"
      >
        {{ttt('unsaved')}}
      </span>
      <i
        class="fa fa-truck"
        data-bs-toggle="tooltip"
        data-bs-html="true"
        :title="ttt('Distribution Order')"
      ></i
      >&nbsp;
      <strong>{{ opplan.operationplan__reference || opplan.reference }}</strong
      >&nbsp;
      <i
        v-if="!editable || !isSelected(opplan.reference)"
        class="fa"
        :class="
            opplan.status ==='confirmed' || opplan.operationplan__status ==='confirmed'
              ? 'fa-lock'
              : '' +
                  ',' +
                  (opplan.status ==='approved' || opplan.operationplan__status ==='approved')
                ? 'fa-unlock-alt'
                : '' +
                    ',' +
                    (opplan.status ==='proposed' || opplan.operationplan__status ==='proposed')
                  ? 'fa-unlock'
                  : '' +
                      ',' +
                      (opplan.status ==='completed' || opplan.operationplan__status ==='completed')
                    ? 'fa-check'
                    : '' +
                        ',' +
                        (opplan.status ==='closed' || opplan.operationplan__status ==='closed')
                      ? 'fa-times'
                      : ''
          "
        aria-hidden="true"
      ></i>
        <span
          class="btn-group"
          role="group"
          v-if="editable && isSelected(opplan.reference) && !opplan.hasOwnProperty('operationplan__status')"
        >
        <button
          v-for="s in ['proposed','approved','confirmed','completed','closed']"
          :key="s"
          type="button"
          class="btn btn-sm"
          :class="[getStatus(opplan) === s ? 'active' : '', store.isChanged(opplan.reference, 'status') && s === opplan.status ? 'btn-danger' : 'btn-primary']"
          data-bs-toggle="tooltip"
          data-bs-html="true"
          :title="ttt(s)"
          :disabled="actions.hasOwnProperty('erp_incr_export') || !editable"
          @click="setStatus(opplan, s)"
        >
          <i class="fa" :class="getStatusIcon(s)"></i>
        </button>
      </span>

      <span
        class="btn-group"
        role="group"
        v-if="editable && isSelected(opplan.reference) && opplan.hasOwnProperty('operationplan__status')"
      >
        <button
          v-for="s in ['proposed','approved','confirmed','completed','closed']"
          :key="s"
          type="button"
          class="btn btn-sm"
          :class="[getStatus(opplan) === s ? 'active' : '', store.isChanged(opplan.reference, 'status') && s === opplan.operationplan__status ? 'btn-danger' : ' btn-primary']"
          data-bs-toggle="tooltip"
          data-bs-html="true"
          :title="ttt(s)"
          :disabled="actions.hasOwnProperty('erp_incr_export') || !editable"
          @click="setStatus(opplan, s)"
        >
          <i class="fa" :class="getStatusIcon(s)"></i>
        </button>
      </span>
    </p>
    <p>
      <span class="text-truncate d-inline-block" style="max-width: 180px; vertical-align: middle;"
            data-bs-toggle="tooltip" data-bs-html="true"
            :title="opplan.item__name || opplan.item">
        {{ opplan.item__name || opplan.item }}
      </span>&nbsp;
      <a
        @click.stop=""
        :href="
            urlPrefix +
            '/detail/input/item/' +
            adminEscape(opplan.item__name || opplan.item) +
            '/'
          "
      >
        <i class="fa fa-caret-right"></i>
      </a>
    </p>
    <p
      v-if="(opplan.item__description || opplan.operationplan__item__description) && editable && isSelected(opplan.reference)"
    >
      <span class="text-truncate d-inline-block" style="max-width: 180px; vertical-align: middle;"
            data-bs-toggle="tooltip" data-bs-html="true"
            :title="opplan.item__description || opplan.operationplan__item__description">
        {{ opplan.item__description || opplan.operationplan__item__description }}
      </span>&nbsp;
    </p>
    <p>
      {{ opplan.operationplan__origin || opplan.origin }}&nbsp;
      <a
        @click.stop=""
        :href="
            urlPrefix +
            '/detail/input/location/' +
            adminEscape(opplan.operationplan__origin || opplan.origin) +
            '/'
          "
      >
        <i class="fa fa-caret-right"></i>
      </a>
    </p>
    <p>
      {{ opplan.destination || opplan.operationplan__destination ||
      opplan.operationplan__location || opplan.location }}&nbsp;
      <a
        @click.stop=""
        :href="
            urlPrefix +
            '/detail/input/location/' +
            adminEscape(
              opplan.destination ||
                opplan.operationplan__destination ||
                opplan.operationplan__location ||
                opplan.location
            ) +
            '/'
          "
      >
        <i class="fa fa-caret-right"></i>
      </a>
    </p>
    <p
      :class="
          opplan.hasOwnProperty('quantityOriginal') ||
          opplan.hasOwnProperty('operationplan__quantityOriginal')
            ? 'dirty'
            : ''
        "
    >
      <div class="row gx-2">
        <div class="col">
          <span v-if="!editable || !isSelected(opplan.reference)"
                data-bs-toggle="tooltip" data-bs-html="true"
                :title="ttt('Quantity')"
            >{{ numberFormat(opplan.operationplan__quantity || opplan.quantity)
            }}</span
          >
          <input
            class="form-control form-control-sm"
            data-bs-toggle="tooltip" data-bs-html="true"
            :title="ttt('Quantity')"
            :class="store.isChanged(opplan.reference, 'quantity') ? 'ng-dirty' : ''"
            v-if="
                editable &&
                isSelected(opplan.reference) &&
                !opplan.hasOwnProperty('operationplan__quantity')
              "
            type="number"
            step="0"
            min="0"
            @focus="oldValue = opplan.quantity"
            v-model="opplan.quantity"
            @input="changeCard(opplan, 'quantity', oldValue, opplan.quantity)"
          />
          <input
            class="form-control form-control-sm"
            data-bs-toggle="tooltip" data-bs-html="true"
            :title="ttt('Quantity')"
            :class="store.isChanged(opplan.reference, 'operationplan__quantity') ? 'ng-dirty' : ''"
            v-if="
                editable &&
                isSelected(opplan.reference) &&
                opplan.hasOwnProperty('operationplan__quantity')
              "
            type="number"
            step="0"
            min="0"
            @focus="oldValue = opplan.operationplan__quantity"
            v-model="opplan.operationplan__quantity"
            @input="changeCard(opplan, 'operationplan__quantity', oldValue, opplan.operationplan__quantity)"
          />
        </div>
        <div class="col">
        </div>
      </div>
    </p>
    <p
      :class="
          (
            opplan.hasOwnProperty('startdateOriginal') ||
            opplan.hasOwnProperty('operationplan__startdateOriginal') ||
            opplan.hasOwnProperty('enddateOriginal') ||
            opplan.hasOwnProperty('operationplan__enddateOriginal')
          )
            ? 'dirty'
            : ''
        "
    >
      <div class="row gx-2">
        <div class="col">
          <span v-if="!editable || !isSelected(opplan.reference)"
                data-bs-toggle="tooltip" data-bs-html="true"
                :title="ttt('Start date')">
            {{ dateFormat(opplan.operationplan__startdate || opplan.startdate) }}
          </span>
          <input
            class="form-control form-control-sm"
            data-bs-toggle="tooltip" data-bs-html="true"
            :title="ttt('Start date')"
            :class="store.isChanged(opplan.reference, 'startdate') ? 'ng-dirty' : ''"
            v-if="
                editable &&
                isSelected(opplan.reference) &&
                !opplan.hasOwnProperty('operationplan__startdate')
              "
            type="datetime-local"
            @focus="oldValue = opplan.startdate"
            v-model="opplan.startdate"
            @input="changeCard(opplan, 'startdate', oldValue, opplan.startdate)"
          />
          <input
            class="form-control form-control-sm"
            data-bs-toggle="tooltip" data-bs-html="true"
            :title="ttt('Start date')"
            :class="store.isChanged(opplan.reference, 'operationplan__startdate') ? 'ng-dirty' : ''"
            v-if="
                editable &&
                isSelected(opplan.reference) &&
                opplan.hasOwnProperty('operationplan__startdate')
              "
            type="datetime-local"
            @focus="oldValue = opplan.operationplan__startdate"
            v-model="opplan.operationplan__startdate"
            @input="
                changeCard(
                  opplan,
                  'operationplan__startdate',
                  oldValue,
                  opplan.operationplan__startdate
                )
              "
          />
        </div>
        <div class="col">
          <span v-if="!editable || !isSelected(opplan.reference)"
                data-bs-toggle="tooltip" data-bs-html="true"
                :title="ttt('End date')">
            {{ dateTimeFormat(opplan.operationplan__enddate || opplan.enddate) }}
          </span>
          <input
            class="form-control form-control-sm"
            data-bs-toggle="tooltip" data-bs-html="true"
            :title="ttt('End date')"
            :class="store.isChanged(opplan.reference, 'enddate') ? 'ng-dirty' : ''"
            v-if="
                editable &&
                isSelected(opplan.reference) &&
                !opplan.hasOwnProperty('operationplan__enddate')
              "
            type="datetime-local"
            @focus="oldValue = opplan.enddate"
            v-model="opplan.enddate"
            @input="changeCard(opplan, 'enddate', oldValue, opplan.enddate)"
          />
          <input
            class="form-control form-control-sm"
            data-bs-toggle="tooltip" data-bs-html="true"
            :title="ttt('End date')"
            :class="store.isChanged(opplan.reference, 'operationplan__enddate') ? 'ng-dirty' : ''"
            v-if="
                editable &&
                isSelected(opplan.reference) &&
                opplan.hasOwnProperty('operationplan__enddate')
              "
            type="datetime-local"
            @focus="oldValue = opplan.operationplan__enddate"
            v-model="opplan.operationplan__enddate"
            @input="
                changeCard(opplan, 'operationplan__enddate', oldValue, opplan.operationplan__enddate)
              "
          />
        </div>
      </div>
    </p>
    <p v-if="isSelected(opplan.reference) || (opplan.remark || opplan.operationplan__remark)">
      <span v-if="(!editable || !isSelected(opplan.reference)) && ((opplan.remark && opplan.remark.length > 0) || (opplan.operationplan__remark && opplan.operationplan__remark.length > 0))"
        class="text-truncate d-inline-block" style="max-width: 180px; vertical-align: middle;"
        data-bs-toggle="tooltip" data-bs-html="true"
        :title="opplan.remark || opplan.operationplan__remark"
      >{{ opplan.remark || opplan.operationplan__remark }}</span
      >
      <input
        class="form-control form-control-sm"
        data-bs-toggle="tooltip" data-bs-html="true"
        :title="ttt('Remark')"
        :class="store.isChanged(opplan.reference, 'remark') ? 'ng-dirty' : ''"
        v-if="
            editable &&
            isSelected(opplan.reference) &&
            !opplan.hasOwnProperty('operationplan__remark')
          "
        @focus="oldValue = opplan.remark"
        v-model="opplan.remark"
        @input="changeCard(opplan, 'remark', oldValue, opplan.remark)"
      />
      <input
        class="form-control form-control-sm"
        data-bs-toggle="tooltip" data-bs-html="true"
        :title="ttt('Remark')"
        :class="store.isChanged(opplan.reference, 'operationplan__remark') ? 'ng-dirty' : ''"
        v-if="
            editable &&
            isSelected(opplan.reference) &&
            opplan.hasOwnProperty('operationplan__remark')
          "
        @focus="oldValue = opplan.operationplan__remark"
        v-model="opplan.operationplan__remark"
        @input="
            changeCard(opplan, 'operationplan__remark', oldValue, opplan.operationplan__remark)
          "
      />
    </p>
  </div>
  <div v-if="opplan.type === 'MO' || opplan.type === 'WO'">
    <p>
      <span
        v-if="store.isChanged(opplan.reference, null)  && !isSelected(opplan.reference)"
        class="badge bg-danger float-end"
      >
        {{ttt('unsaved')}}
      </span>
      <i
        class="fa fa-wrench"
        data-bs-toggle="tooltip"
        data-bs-html="true"
        :title="ttt('Manufacturing Order')"
      ></i
      >&nbsp;
      <strong>{{ opplan.operationplan__reference || opplan.reference }}</strong
      >&nbsp;
      <i
        v-if="!editable || !isSelected(opplan.reference)"
        class="fa"
        :class="displayStatusIcon(opplan)"
        aria-hidden="true"
      ></i>
      <span
        class="btn-group"
        role="group"
        v-if="editable && isSelected(opplan.reference)"
      >
        <button
          v-for="s in ['proposed','approved','confirmed','completed','closed']"
          :key="s"
          type="button"
          class="btn btn-sm btn-primary"
          :class="[getStatus(opplan) === s ? 'active' : '', store.isChanged(opplan.reference, 'status') && s === opplan.status ? 'btn-danger' : '']"
          data-bs-toggle="tooltip"
          data-bs-html="true"
          :title="ttt(s)"
          :disabled="actions.hasOwnProperty('erp_incr_export') || !editable"
          @click="setStatus(opplan, s)"
        >
          <i class="fa" :class="getStatusIcon(s)"></i>
        </button>
      </span>
    </p>
    <p
      v-if="opplan.item__name || opplan.operationplan__item__name || opplan.item"
    >
      <span class="text-truncate d-inline-block" style="max-width: 180px; vertical-align: middle;"
            data-bs-toggle="tooltip" data-bs-html="true"
            :title="opplan.item__name || opplan.operationplan__item__name || opplan.item">
        {{ opplan.item__name || opplan.operationplan__item__name || opplan.item }}
      </span>&nbsp;
      <a
        @click.stop=""
        :href="urlPrefix + '/detail/input/item/' + adminEscape(opplan.item__name || opplan.operationplan__item__name || opplan.item) + '/'"
      >
        <i class="fa fa-caret-right"></i>
      </a>
    </p>
    <p
      v-if="(opplan.item__description || opplan.operationplan__item__description) && editable && isSelected(opplan.reference)"
    >
      <span class="text-truncate d-inline-block" style="max-width: 180px; vertical-align: middle;"
            data-bs-toggle="tooltip" data-bs-html="true"
            :title="opplan.item__description || opplan.operationplan__item__description">
        {{ opplan.item__description || opplan.operationplan__item__description }}
      </span>&nbsp;
    </p>
    <p>
      <span class="text-truncate d-inline-block" style="max-width: 180px; vertical-align: middle;"
            data-bs-toggle="tooltip" data-bs-html="true"
            :title="opplan.operationplan__name || opplan.operationplan__operation__name || opplan.operation">
        {{ opplan.operationplan__name || opplan.operationplan__operation__name ||
        opplan.operation }}
      </span>&nbsp;
      <a
        @click.stop=""
        :href="urlPrefix + '/detail/input/operation/' + adminEscape(opplan.operationplan__name || opplan.operationplan__operation__name || opplan.operation) + '/'"
      >
        <i class="fa fa-caret-right"></i>
      </a>
    </p>
    <p
      v-if="(opplan.operation__description || opplan.operationplan__operation__description) && editable && isSelected(opplan.reference)"
    >
      <span class="text-truncate d-inline-block" style="max-width: 180px; vertical-align: middle;"
            data-bs-toggle="tooltip" data-bs-html="true"
            :title="opplan.operation__description || opplan.operationplan__operation__description">
        {{ opplan.operation__description ||
        opplan.operationplan__operation__description }}
      </span>&nbsp;
    </p>
    <p
      :class="(opplan.hasOwnProperty('quantityOriginal') || opplan.hasOwnProperty('operationplan__quantityOriginal') || opplan.hasOwnProperty('quantity_completedOriginal') || opplan.hasOwnProperty('operationplan__quantity_completedOriginal'))?'dirty':''"
    >
      <div class="row gx-2">
        <div class="col">
          <span v-if="!editable || !isSelected(opplan.reference)"
                data-bs-toggle="tooltip" data-bs-html="true"
                :title="ttt('Quantity')"
            >{{ numberFormat(opplan.operationplan__quantity || opplan.quantity)
            }}</span
          >
          <input
            class="form-control form-control-sm"
            data-bs-toggle="tooltip" data-bs-html="true"
            :title="ttt('Quantity')"
            :class="store.isChanged(opplan.reference, 'operationplan__quantity') ? 'ng-dirty' : ''"
            v-if="
                editable &&
                isSelected(opplan.reference) &&
                opplan.hasOwnProperty('operationplan__quantity') &&
                !['ManufacturingOrderList', 'WorkOrderList'].includes(reportKey)
              "
            type="number"
            step="0"
            min="0"
            @focus="oldValue = opplan.operationplan__quantity"
            v-model="opplan.operationplan__quantity"
            @input="changeCard(opplan, 'operationplan__quantity', oldValue, opplan.operationplan__quantity)"
          />
          <input
            class="form-control form-control-sm"
            data-bs-toggle="tooltip" data-bs-html="true"
            :title="ttt('Quantity')"
            :class="store.isChanged(opplan.reference, 'quantity') ? 'ng-dirty' : ''"
            v-if="
                editable &&
                isSelected(opplan.reference) &&
                opplan.hasOwnProperty('quantity') &&
                ['ManufacturingOrderList', 'WorkOrderList'].includes(reportKey)
              "
            type="number"
            step="0"
            min="0"
            @focus="oldValue = opplan.quantity"
            v-model="opplan.quantity"
            @input="changeCard(opplan, 'quantity', oldValue, opplan.quantity)"
          />
        </div>
        <div class="col">
          <span v-if="!editable || !isSelected(opplan.reference)"
                data-bs-toggle="tooltip" data-bs-html="true"
                :title="ttt('Completed quantity')"
            >{{ numberFormat( opplan.operationplan__quantity_completed ||
            opplan.quantity_completed || 0 ) }}</span
          >
          <input
            class="form-control form-control-sm"
            data-bs-toggle="tooltip" data-bs-html="true"
            :title="ttt('Completed quantity')"
            :class="store.isChanged(opplan.reference, 'operationplan__quantity_completed') ? 'ng-dirty' : ''"
            v-if="
                editable &&
                isSelected(opplan.reference) &&
                opplan.hasOwnProperty('operationplan__quantity')
              "
            type="number"
            step="0"
            min="0"
            @focus="oldValue = opplan.operationplan__quantity_completed || 0"
            v-model="opplan.operationplan__quantity_completed"
            @input="
                changeCard(
                  opplan,
                  'operationplan__quantity_completed',
                  oldValue,
                  opplan.operationplan__quantity_completed
                )
              "
          />
          <input
            class="form-control form-control-sm"
            data-bs-toggle="tooltip" data-bs-html="true"
            :title="ttt('Completed quantity')"
            :class="store.isChanged(opplan.reference, 'quantity_completed') ? 'ng-dirty' : ''"
            v-if="
                editable &&
                isSelected(opplan.reference) &&
                !opplan.hasOwnProperty('operationplan__quantity')
              "
            type="number"
            step="0"
            min="0"
            @focus="oldValue = opplan.quantity_completed || 0"
            v-model="opplan.quantity_completed"
            @input="changeCard(opplan, 'quantity_completed', oldValue, opplan.quantity_completed)"
          />
        </div>
      </div>
    </p>
    <p
      :class="(opplan.hasOwnProperty('startdateOriginal') || opplan.hasOwnProperty('operationplan__startdateOriginal') || opplan.hasOwnProperty('enddateOriginal') || opplan.hasOwnProperty('operationplan__enddateOriginal'))?'dirty':''"
    >
      <div class="row gx-2">
        <div class="col">
          <span v-if="!editable || !isSelected(opplan.reference)"
                data-bs-toggle="tooltip" data-bs-html="true"
                :title="ttt('Start date')">
            {{ dateFormat(opplan.operationplan__startdate || opplan.startdate) }}
          </span>
          <input
            class="form-control form-control-sm"
            data-bs-toggle="tooltip" data-bs-html="true"
            :title="ttt('Start date')"
            :class="store.isChanged(opplan.reference, 'startdate') ? 'ng-dirty' : ''"
            v-if="
                editable &&
                isSelected(opplan.reference) &&
                !opplan.hasOwnProperty('operationplan__startdate')
              "
            type="datetime-local"
            @focus="oldValue = opplan.startdate"
            v-model="opplan.startdate"
            @input="changeCard(opplan, 'startdate', oldValue, opplan.startdate)"
          />
          <input
            class="form-control form-control-sm"
            data-bs-toggle="tooltip" data-bs-html="true"
            :title="ttt('Start date')"
            :class="store.isChanged(opplan.reference, 'operationplan__startdate') ? 'ng-dirty' : ''"
            v-if="
                editable &&
                isSelected(opplan.reference) &&
                opplan.hasOwnProperty('operationplan__startdate')
              "
            type="datetime-local"
            @focus="oldValue = opplan.operationplan__startdate"
            v-model="opplan.operationplan__startdate"
            @input="
                changeCard(
                  opplan,
                  'operationplan__startdate',
                  oldValue,
                  opplan.operationplan__startdate
                )
              "
          />
        </div>
        <div class="col">
          <span v-if="!editable || !isSelected(opplan.reference)"
                data-bs-toggle="tooltip" data-bs-html="true"
                :title="ttt('End date')">
            {{ dateFormat(opplan.operationplan__enddate || opplan.enddate) }}
          </span>
          <input
            class="form-control form-control-sm"
            data-bs-toggle="tooltip" data-bs-html="true"
            :title="ttt('End date')"
            :class="store.isChanged(opplan.reference, 'enddate') ? 'ng-dirty' : ''"
            v-if="
                editable &&
                isSelected(opplan.reference) &&
                !opplan.hasOwnProperty('operationplan__enddate')
              "
            type="datetime-local"
            @focus="oldValue = opplan.enddate"
            v-model="opplan.enddate"
            @input="changeCard(opplan, 'enddate', oldValue, opplan.enddate)"
          />
          <input
            class="form-control form-control-sm"
            data-bs-toggle="tooltip" data-bs-html="true"
            :title="ttt('End date')"
            :class="store.isChanged(opplan.reference, 'operationplan__enddate') ? 'ng-dirty' : ''"
            v-if="
                editable &&
                isSelected(opplan.reference) &&
                opplan.hasOwnProperty('operationplan__enddate')
              "
            type="datetime-local"
            @focus="oldValue = opplan.operationplan__enddate"
            v-model="opplan.operationplan__enddate"
            @input="
                changeCard(opplan, 'operationplan__enddate', oldValue, opplan.operationplan__enddate)
              "
          />
        </div>
      </div>
    </p>
    <p v-if="isSelected(opplan.reference) || (opplan.remark || opplan.operationplan__remark)">
      <span v-if="(!editable || !isSelected(opplan.reference)) && ((opplan.remark && opplan.remark.length > 0) || (opplan.operationplan__remark && opplan.operationplan__remark.length > 0))"
        class="text-truncate d-inline-block" style="max-width: 180px; vertical-align: middle;"
        data-bs-toggle="tooltip" data-bs-html="true"
        :title="opplan.remark || opplan.operationplan__remark"
      >{{ opplan.remark || opplan.operationplan__remark }}</span
      >
      <input
        class="form-control form-control-sm"
        data-bs-toggle="tooltip" data-bs-html="true"
        :title="ttt('Remark')"
        :class="store.isChanged(opplan.reference, 'remark') ? 'ng-dirty' : ''"
        v-if="
            editable &&
            isSelected(opplan.reference) &&
            !opplan.hasOwnProperty('operationplan__remark')
          "
        @focus="oldValue = opplan.remark"
        v-model="opplan.remark"
        @input="changeCard(opplan, 'remark', oldValue, opplan.remark)"
      />
      <input
        class="form-control form-control-sm"
        data-bs-toggle="tooltip" data-bs-html="true"
        :title="ttt('Remark')"
        :class="store.isChanged(opplan.reference, 'operationplan__remark') ? 'ng-dirty' : ''"
        v-if="
            editable &&
            isSelected(opplan.reference) &&
            opplan.hasOwnProperty('operationplan__remark')
          "
        @focus="oldValue = opplan.operationplan__remark"
        v-model="opplan.operationplan__remark"
        @input="
            changeCard(opplan, 'operationplan__remark', oldValue, opplan.operationplan__remark)
          "
      />
    </p>
  </div>
  <div data-no-drag v-if="opplan.type === 'STCK'">
    <p>
      <span
        v-if="store.isChanged(opplan.reference, null)  && !isSelected(opplan.reference)"
        class="badge bg-danger float-end"
      >
        {{ttt('unsaved')}}
      </span>
      <i
        class="fa fa-box"
        data-bs-toggle="tooltip"
        data-bs-html="true"
        :title="ttt('Stock')"
      ></i
      >&nbsp;
      <strong>
        <span class="text-truncate d-inline-block" style="max-width: 180px; vertical-align: middle;"
              data-bs-toggle="tooltip" data-bs-html="true"
              :title="(opplan.item__name || opplan.item) + ' @ ' + opplan.location">
          {{ opplan.item__name || opplan.item }} @ {{ opplan.location }}
        </span></strong
      >&nbsp;
      <a
        @click.stop=""
        :href="urlPrefix + '/detail/input/buffer/' + adminEscape((opplan.item__name || opplan.item) + ' @ ' + opplan.location ) + '/'"
      >
        <i class="fa fa-caret-right"></i>
      </a>
    </p>
    <p
      v-if="opplan.item__description || opplan.operationplan__item__description"
    >
      <span class="text-truncate d-inline-block" style="max-width: 180px; vertical-align: middle;"
            data-bs-toggle="tooltip" data-bs-html="true"
            :title="opplan.item__description || opplan.operationplan__item__description">
        {{ opplan.item__description || opplan.operationplan__item__description }}
      </span>&nbsp;
    </p>
    <p><span data-bs-toggle="tooltip" data-bs-html="true" :title="ttt('Quantity')">{{ numberFormat(opplan.operationplan__quantity || opplan.quantity) }}</span></p>
  </div>
  <div data-no-drag v-if="opplan.type === 'DLVR'">
    <p>
      <span
        v-if="store.isChanged(opplan.reference, null)"
        class="badge bg-danger float-end"
      >
        {{ttt('unsaved')}}
      </span>
      <i
        class="fa fa-truck"
        data-bs-toggle="tooltip"
        data-bs-html="true"
        :title="ttt('Delivery')"
      ></i
      >&nbsp;
      <strong>{{ opplan.demands[0][1] }}</strong>
    </p>
    <p v-if="opplan.item__name">
      <span class="text-truncate d-inline-block" style="max-width: 180px; vertical-align: middle;"
            data-bs-toggle="tooltip" data-bs-html="true"
            :title="opplan.item">
        {{ opplan.item }}
      </span>&nbsp;
      <a
        @click.stop=""
        :href="urlPrefix + '/detail/input/item/' + adminEscape(opplan.item__name) + '/'"
      >
        <i class="fa fa-caret-right"></i>
      </a>
    </p>
    <p
      v-if="opplan.item__description || opplan.operationplan__item__description"
    >
      <span class="text-truncate d-inline-block" style="max-width: 180px; vertical-align: middle;"
            data-bs-toggle="tooltip" data-bs-html="true"
            :title="opplan.item__description || opplan.operationplan__item__description">
        {{ opplan.item__description || opplan.operationplan__item__description }}
      </span>&nbsp;
    </p>
    <p>
      {{ opplan.location }}&nbsp;
      <a
        @click.stop=""
        :href="urlPrefix + '/detail/input/location/' + adminEscape(opplan.location) + '/'"
      >
        <i class="fa fa-caret-right"></i>
      </a>
    </p>
    <p><span data-bs-toggle="tooltip" data-bs-html="true" :title="ttt('End date')">{{ dateFormat(opplan.operationplan__enddate || opplan.enddate) }}</span></p>
    <p><span data-bs-toggle="tooltip" data-bs-html="true" :title="ttt('Quantity')">{{ numberFormat(opplan.operationplan__quantity || opplan.quantity) }}</span></p>
  </div>
</div>
<!--{% endverbatim %}-->
