OTM/template/module/journey_step.pug

div(v-for="(e, idx) in journey_data.main", :key="idx")
  .bg-dark.text-white(v-if="journey_step_data.section == idx")
    .container.section
      .row.text-center
        .input.col-sm-2
          input(v-model="journey_data.main[idx].title")
        .input.col-sm-2
          input(
            placeholder="Day title",
            v-model="journey_data.main[idx].step_title[journey_step_data.day]"
          )
        .col-sm-3
        .right.input.col-sm-2
          input(
            disabled="",
            :value="active_date() + ' (' + journey_step_data.day + ')'"
          )
      .row
        .col-9.col-ssm-12
          include map.pug
        .col-3.col-ssm-12
          .row.text-center
            div
              label Date Range ({{ step_len(idx) }})
            .input.text-dark
              date-picker(
                :lang="lang",
                v-model="journey_data.main[idx].dateRange",
                range="",
                format="ddd D MMM",
                placeholder="Date Range",
                v-on:change="update_date(idx)"
              )
          .row.text-center
            div
              label Hotel
            multiselect#ajax(
              v-model="journey_data.main[idx].hotel",
              label="sname",
              track-by="place_id",
              placeholder="Type to search",
              open-direction="bottom",
              :options="query.nominatim",
              :searchable="true",
              :loading="querying.hotel",
              :internal-search="false",
              :clear-on-select="false",
              :options-limit="50",
              :limit="1",
              :max-height="600",
              @search-change="debounceSearch.hotel"
            )
          .row.text-center
            div
              label Restoration
            multiselect#ajax(
              v-model="journey_data.main[idx].places.restaurants",
              label="sname",
              track-by="place_id",
              placeholder="Type to search",
              open-direction="bottom",
              :multiple="true",
              :options="query.nominatim",
              :searchable="true",
              :loading="querying.food",
              :internal-search="false",
              :clear-on-select="false",
              :options-limit="50",
              :limit="10",
              :max-height="600",
              @search-change="debounceSearch.restaurants"
            )
          .row.text-center
            div
              label Activities
            multiselect#ajax(
              v-model="journey_data.main[idx].places.activities",
              label="sname",
              track-by="place_id",
              placeholder="Type to search",
              open-direction="bottom",
              :multiple="true",
              :options="query.nominatim",
              :searchable="true",
              :loading="querying.place",
              :internal-search="false",
              :clear-on-select="false",
              :options-limit="50",
              :limit="10",
              :max-height="600",
              @search-change="debounceSearch.places"
            )
          .row.text-center
            div
              label Notes
            .input.text-dark(style="width: 100%")
              textarea-autosize.text-small(
                v-model="journey_data.main[idx].notes",
                placeholder="Notes",
                :min-height="30",
                :max-height="350"
              )