extends base
include _reviewCard

block append head
  script(src='https://api.mapbox.com/mapbox-gl-js/v0.54.0/mapbox-gl.js')
  link(href='https://api.mapbox.com/mapbox-gl-js/v0.54.0/mapbox-gl.css' rel='stylesheet')

mixin overviewBox(label, text, icon)
  .overview-box__detail
    svg.overview-box__icon
      use(xlink:href=`/img/icons.svg#icon-${icon}`)
    span.overview-box__label= label
    span.overview-box__text= text

block content
  section.section-header
    .header__hero
      .header__hero-overlay  
      img.header__hero-img(src=`/img/tours/${tour.imageCover}`, alt=`${tour.name}`)

    .heading-box
      h1.heading-primary
        span= `${tour.name} tour`
      .heading-box__group
        .heading-box__detail
          svg.heading-box__icon
            use(xlink:href='/img/icons.svg#icon-clock')
          span.heading-box__text= `${tour.duration} days`
        .heading-box__detail
          svg.heading-box__icon
            use(xlink:href='/img/icons.svg#icon-map-pin')
          span.heading-box__text= tour.startLocation.description

  section.section-description
    .overview-box
      div
        .overview-box__group
          h2.heading-secondary.ma-bt-lg Quick facts

          - const date = tour.startDates[0].toLocaleString('en-us', {month: 'long', year: 'numeric'})
          +overviewBox('Next date', date, 'calendar')
          +overviewBox('Difficulty', tour.difficulty, 'trending-up')
          +overviewBox('Participants', `${tour.maxGroupSize} people`, 'user')
          +overviewBox('Rating', `${tour.ratingsAverage} / 5`, 'star')

        .overview-box__group
          h2.heading-secondary.ma-bt-lg Your tour guides

          each guide in tour.guides
            .overview-box__detail
              img.overview-box__img(src=`/img/users/${guide.photo}`, alt=`${guide.name}`)

              - if (guide.role === 'lead-guide')
                span.overview-box__label Lead guide
              - if (guide.role === 'guide')
                span.overview-box__label Tour guide
              span.overview-box__text= guide.name

    .description-box
      h2.heading-secondary.ma-bt-lg= `About ${tour.name} tour`
      - const parapraphs = tour.description.split('\n');
      each p in parapraphs
        p.description__text= p

  section.section-pictures
    each img, i in tour.images
      .picture-box
        img.picture-box__img(src=`/img/tours/${img}`, alt=`The Park Camper Tour ${i + 1}`, class=`picture-box__img--${i + 1}`)

  section.section-map
    #map(data-locations=`${JSON.stringify(tour.locations)}`)

  section.section-reviews
    .reviews
      each review in tour.reviews
        +reviewCard(review)

  section.section-cta
    .cta
      .cta__img.cta__img--logo
        img(src='/img/logo-white.png', alt='Natours logo')
      img.cta__img.cta__img--1(src=`/img/tours/${tour.images[1]}`, alt='Tour picture')
      img.cta__img.cta__img--2(src=`/img/tours/${tour.images[2]}`, alt='Tour picture')
      .cta__content
        h2.heading-secondary What are you waiting for?
        p.cta__text= `${tour.duration} days. 1 adventure. Infinite memories. Make it yours today!`
        
        if user
          button.btn.btn--green.span-all-rows#book-tour(data-tour-id=`${tour.id}`) Book tour now!
        else
          a.btn.btn--green.span-all-rows(href='/login') Log in to book tour