borbad.s5l.ru/vue/app/shared/EventDetailModal/index.pug

//- app/shared/EventDetailModal/index.pug
ModalWindow(
  :isVisible='isVisible'
  @update:isVisible='$emit("update:isVisible", $event)'
  :title='event.title'
  :contentClass='"max-w-4xl"'
  :showFooter='false'
)
  template(#body)
    div(class="event-detail")
      div(class="grid grid-cols-1 lg:grid-cols-2 gap-8")
        //- Изображение и основная информация
        div(class="event-visual")
          img(:src='event.image' :alt='event.title' class="w-full rounded-xl shadow-lg")
          div(class="event-stats grid grid-cols-3 gap-4 mt-4 text-center")
            div(class="stat p-4 bg-gray-50 dark:bg-gray-700 rounded-lg")
              div(class="stat-value text-xl font-bold text-accent") {{ event.availableTickets }}
              div(class="stat-label text-sm text-gray-600 dark:text-gray-400") Осталось билетов
            div(class="stat p-4 bg-gray-50 dark:bg-gray-700 rounded-lg")
              div(class="stat-value text-xl font-bold text-gray-800 dark:text-white") {{ event.duration }}
              div(class="stat-label text-sm text-gray-600 dark:text-gray-400") Продолжительность
            div(class="stat p-4 bg-gray-50 dark:bg-gray-700 rounded-lg")
              div(class="stat-value text-xl font-bold text-gray-800 dark:text-white") {{ event.ageRestriction }}
              div(class="stat-label text-sm text-gray-600 dark:text-gray-400") Возраст
        
        //- Детальная информация
        div(class="event-info")
          div(class="info-grid space-y-6")
            //- Дата и время
            div(class="info-item flex items-start")
              div(class="icon mr-4 mt-1")
                svg(class="w-5 h-5 text-accent" fill="none" stroke="currentColor" viewBox="0 0 24 24")
                  path(stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z")
              div(class="content")
                div(class="label font-semibold text-gray-700 dark:text-gray-300") Дата и время
                div(class="value text-lg text-gray-800 dark:text-white") {{ formatDateTime(event.date, event.time) }}
            
            //- Место проведения
            div(class="info-item flex items-start")
              div(class="icon mr-4 mt-1")
                svg(class="w-5 h-5 text-accent" fill="none" stroke="currentColor" viewBox="0 0 24 24")
                  path(stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z")
              div(class="content")
                div(class="label font-semibold text-gray-700 dark:text-gray-300") Место проведения
                div(class="value text-lg text-gray-800 dark:text-white") {{ event.venue }}
                div(class="text-sm text-gray-600 dark:text-gray-400") Концертный зал "Кохи Борбад"
            
            //- Категория
            div(class="info-item flex items-start")
              div(class="icon mr-4 mt-1")
                svg(class="w-5 h-5 text-accent" fill="none" stroke="currentColor" viewBox="0 0 24 24")
                  path(stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10")
              div(class="content")
                div(class="label font-semibold text-gray-700 dark:text-gray-300") Категория
                div(class="value")
                  span(
                    :class='getCategoryBadgeClass(event.category)'
                    class="inline-block px-3 py-1 text-sm font-medium rounded-full"
                  ) {{ getCategoryLabel(event.category) }}
            
            //- Цена
            div(class="info-item flex items-start")
              div(class="icon mr-4 mt-1")
                svg(class="w-5 h-5 text-accent" fill="none" stroke="currentColor" viewBox="0 0 24 24")
                  path(stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1")
              div(class="content")
                div(class="label font-semibold text-gray-700 dark:text-gray-300") Цена
                div(class="value text-3xl font-bold text-accent") {{ event.price }} 
                  span(class="text-lg font-normal text-gray-600 dark:text-gray-400") сомони
            
            //- Описание
            div(class="info-item")
              div(class="label font-semibold text-gray-700 dark:text-gray-300 mb-2") Описание мероприятия
              div(class="value text-gray-600 dark:text-gray-400 leading-relaxed") {{ event.description }}
          
          //- Кнопки действий
          div(class="action-buttons mt-8 flex flex-col sm:flex-row gap-4")
            button(
              @click='bookTickets'
              class="bg-accent text-white px-8 py-4 rounded-lg font-medium hover:bg-yellow-600 transition-colors flex items-center justify-center flex-1"
            )
              svg(class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24")
                path(stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z")
              span Купить билеты
            
            button(
              @click='addToCalendar'
              class="border border-gray-300 text-gray-700 px-6 py-4 rounded-lg font-medium hover:bg-gray-50 transition-colors flex items-center justify-center flex-1 dark:border-gray-600 dark:text-gray-300 dark:hover:bg-gray-700"
            )
              svg(class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24")
                path(stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z")
              span В календарь

  template(#footer)
    div(class="flex justify-between items-center w-full")
      div(class="social-share flex space-x-2")
        button(
          @click='shareOnFacebook'
          class="p-3 rounded-full bg-blue-100 text-blue-600 hover:bg-blue-200 transition-colors dark:bg-blue-900 dark:text-blue-300 dark:hover:bg-blue-800"
          aria-label='Поделиться в Facebook'
        )
          svg(class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24")
            path(d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z")
        button(
          @click='shareOnTwitter'
          class="p-3 rounded-full bg-blue-400 text-white hover:bg-blue-500 transition-colors"
          aria-label='Поделиться в Twitter'
        )
          svg(class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24")
            path(d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z")
      div(class="close-section")
        button(
          @click='$emit("update:isVisible", false)'
          class="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 transition-colors"
        ) Закрыть