diff --git a/package-lock.json b/package-lock.json
index 313fabb..0498669 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -7,6 +7,9 @@
     "": {
       "name": "big-trip",
       "version": "22.0.0",
+      "dependencies": {
+        "dayjs": "1.11.13"
+      },
       "devDependencies": {
         "@babel/core": "7.21.4",
         "@babel/preset-env": "7.21.4",
@@ -20,7 +23,7 @@
         "webpack-dev-server": "4.13.3"
       },
       "engines": {
-        "node": "20"
+        "node": "18.20.5"
       }
     },
     "node_modules/@ampproject/remapping": {
@@ -3325,6 +3328,12 @@
         "url": "https://github.com/sponsors/fb55"
       }
     },
+    "node_modules/dayjs": {
+      "version": "1.11.13",
+      "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.13.tgz",
+      "integrity": "sha512-oaMBel6gjolK862uaPQOVTA7q3TZhuSvuMQAAglQDOWYO9A91IrAOUJEyKVlqJlHE0vq5p5UXxzdPfMH/x6xNg==",
+      "license": "MIT"
+    },
     "node_modules/debug": {
       "version": "4.3.4",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
diff --git a/package.json b/package.json
index 12ed2cc..b118b2a 100644
--- a/package.json
+++ b/package.json
@@ -29,5 +29,8 @@
   },
   "engines": {
     "node": "18.20.5"
+  },
+  "dependencies": {
+    "dayjs": "1.11.13"
   }
 }
diff --git a/src/main.js b/src/main.js
index b4fbb26..e25fdd7 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,8 +1,11 @@
 import BoardPresenter from './presenter/board-presenter.js';
+import Model from './model/model.js';
 
 const filtersContainer = document.querySelector('.trip-controls__filters');
 const eventsContainer = document.querySelector('.trip-events');
 
-const boardPresenter = new BoardPresenter({filtersContainer, eventsContainer});
+const model = new Model();
+const boardPresenter = new BoardPresenter({filtersContainer, eventsContainer, model});
 
 boardPresenter.init();
+
diff --git a/src/mocks/destinations.js b/src/mocks/destinations.js
new file mode 100644
index 0000000..f322103
--- /dev/null
+++ b/src/mocks/destinations.js
@@ -0,0 +1,46 @@
+export const destinations =
+  [
+    {
+      id: '1',
+      description: 'Chamonix, is a beautiful city, a true asian pearl, with crowded streets.',
+      name: 'Chamonix',
+      pictures: [
+        {
+          src: 'http://picsum.photos/300/200?r=0.0762563005163317',
+          description: 'Chamonix parliament building'
+        }
+      ]
+    },
+    {
+      id: '2',
+      description: 'Bangkok is a vibrant metropolis known for its ornate temples, bustling street life.',
+      name: 'Bangkok',
+      pictures: [
+        {
+          src: 'https://en.wikipedia.org/wiki/King_Power_Mahanakhon#/media/File:Tha%C3%AFlande_Bangkok_MahaNakhon.jpg',
+          description: 'King Power Mahanakhon'
+        }
+      ]
+    },
+    {
+      id: '3',
+      description: 'Istanbul is a vibrant city bridging Europe and Asia.',
+      name: 'Istanbul',
+      pictures: [
+        {
+          src: 'http://picsum.photos/300/200?r=0.0762563005163317',
+          description: 'Istanbul Grand Bazaar'
+        }
+      ]
+    },
+    {
+      id: '4',
+      description: 'Amsterdam is a picturesque city known for its canals.',
+      name: 'Amsterdam',
+      pictures: []
+    }
+  ];
+
+export function getDestinations (){
+  return destinations;
+}
diff --git a/src/mocks/events.js b/src/mocks/events.js
new file mode 100644
index 0000000..b688a94
--- /dev/null
+++ b/src/mocks/events.js
@@ -0,0 +1,48 @@
+export const events = [
+  {
+    id: '1',
+    basePrice: 200,
+    dateFrom: '2024-11-10T22:55:56',
+    dateTo: '2024-11-11T11:22:13',
+    destination: '3',
+    isFavorite: false,
+    offers: ['1', '4'],
+    type: 'taxi'
+  },
+  {
+    id: '2',
+    basePrice: 90,
+    dateFrom: '2024-11-12T22:55:56',
+    dateTo: '2024-11-13T11:22:13',
+    destination: '1',
+    isFavorite: false,
+    offers: ['2', '4'],
+    type: 'bus'
+  },
+  {
+    id: '3',
+    basePrice: 900,
+    dateFrom: '2024-11-14T02:42:56',
+    dateTo: '2024-11-14T11:22:13',
+    destination: '2',
+    isFavorite: true,
+    offers: ['1', '2'],
+    type: 'flight'
+  },
+  {
+    id: '4',
+    basePrice: 300,
+    dateFrom: '2024-11-16T22:55:56',
+    dateTo: '2024-11-17T11:22:13',
+    destination: '4',
+    isFavorite: false,
+    offers: [],
+    type: 'train'
+  }
+];
+
+export function getEvents (){
+  return events;
+}
+
+
diff --git a/src/mocks/offers.js b/src/mocks/offers.js
new file mode 100644
index 0000000..5c0fd8c
--- /dev/null
+++ b/src/mocks/offers.js
@@ -0,0 +1,100 @@
+export const offers = [
+  {
+    type: 'taxi',
+    offers: [
+      {
+        id: '1',
+        title: 'Upgrade to a business class',
+        price: 120
+      },
+      {
+        id: '2',
+        title: 'Upgrade to a limousine',
+        price: 300
+      },
+      {
+        id: '3',
+        title: 'Upgrade to a minivan',
+        price: 30
+      },
+      {
+        id: '4',
+        title: 'oversized luggage',
+        price: 60
+      },
+      {
+        id: '5',
+        title: 'chair for child',
+        price: 30
+      }
+    ]
+  },
+  {
+    type: 'bus',
+    offers: []
+  },
+  {
+    type: 'flight',
+    offers: [
+      {
+        id: '1',
+        title: 'Upgrade to a business class',
+        price: 500
+      },
+      {
+        id: '2',
+        title: 'Upgrade to a first class',
+        price: 1000
+      },
+      {
+        id: '3',
+        title: 'Platinum last minute upgrade.',
+        price: 20
+      },
+      {
+        id: '4',
+        title: 'luggage +10kg',
+        price: 40
+      }
+    ]
+  },
+  {
+    type: 'train',
+    offers: [
+      {
+        id: '1',
+        title: 'Upgrade to a business class',
+        price: 120
+      },
+      {
+        id: '2',
+        title: 'Upgrade to a luxury class',
+        price: 120
+      },
+      {
+        id: '3',
+        title: 'shower',
+        price: 10
+      },
+      {
+        id: '4',
+        title: 'Dinner',
+        price: 20
+      },
+      {
+        id: '5',
+        title: '',
+        price: 120
+      },
+      {
+        id: '6',
+        title: 'Upgrade to a business class',
+        price: 120
+      }
+    ]
+  }
+];
+
+export function getOffers(){
+  return offers;
+}
diff --git a/src/model/model.js b/src/model/model.js
new file mode 100644
index 0000000..d16ff95
--- /dev/null
+++ b/src/model/model.js
@@ -0,0 +1,23 @@
+import {events} from '../mocks/events.js';
+import {destinations} from '../mocks/destinations.js';
+import {offers} from '../mocks/offers.js';
+
+export default class Model{
+
+  events = events;
+  destinations = destinations;
+  offers = offers;
+
+  getEvents (){
+    return this.events;
+  }
+
+  getDestinations (){
+    return this.destinations;
+  }
+
+  getOffers(){
+    return this.offers;
+  }
+}
+
diff --git a/src/presenter/board-presenter.js b/src/presenter/board-presenter.js
index 1d389e2..4780ec8 100644
--- a/src/presenter/board-presenter.js
+++ b/src/presenter/board-presenter.js
@@ -3,7 +3,7 @@ import FiltersView from '../view/filters-view.js';
 import SortsView from '../view/sorts-view.js';
 import EventListView from '../view/events-list-view.js';
 import EventEditView from '../view/event-edit-view.js';
-import EventsItemsView from '../view/events-items-view.js';
+import EventItemView from '../view/event-item-view.js';
 import EventView from '../view/event-view.js';
 
 export default class BoardPresenter{
@@ -13,21 +13,27 @@ export default class BoardPresenter{
   eventListView = new EventListView();
   eventView = new EventView();
 
-  constructor({filtersContainer, eventsContainer}){
+  constructor({filtersContainer, eventsContainer, model}){
 
+    this.model = model;
     this.filtersContainer = filtersContainer;
     this.eventsContainer = eventsContainer;
   }
 
   init(){
+    const destinations = this.model.getDestinations();
+    const offers = this.model.getOffers();
+    const events = this.model.getEvents();
+
     render(new FiltersView(), this.filtersContainer);
     render(new SortsView(), this.eventsContainer);
     render(this.eventListView, this.eventsContainer, RenderPosition.AFTEREND);
-    render(new EventEditView(), this.eventListView.getElement(), RenderPosition.AFTERBEGIN);
-    render(new EventView(), this.eventListView.getElement(), RenderPosition.AFTERBEGIN);
+    render(new EventEditView(events[0], destinations, offers), this.eventListView.getElement(), RenderPosition.AFTERBEGIN);
+    //render(new EventView(), this.eventListView.getElement(), RenderPosition.AFTERBEGIN);
 
-    for(let i = 0; i < 3; i += 1){
-      render(new EventsItemsView(), this.eventListView.getElement());
+    for (let i = 0; i < events.length ; i += 1) {
+      const event = events[i];
+      render(new EventItemView(event, destinations, offers), this.eventListView.getElement());
     }
   }
 }
diff --git a/src/utils.js b/src/utils.js
new file mode 100644
index 0000000..654a987
--- /dev/null
+++ b/src/utils.js
@@ -0,0 +1,34 @@
+import dayjs from 'dayjs';
+
+const DATE_FORMAT = 'MMM DD';
+const TIME_FORMAT = 'HH:mm';
+
+function humanizePointDueTime(dueDate) {
+  return dueDate ? dayjs(dueDate).format(TIME_FORMAT) : '';
+}
+
+function humanizePointDueDate(dueDate) {
+  return dueDate ? dayjs(dueDate).format(DATE_FORMAT) : '';
+}
+
+function getDiferenceTime(dateFrom, dateTo){
+  const startDate = dayjs(dateFrom);
+  const endDate = dayjs(dateTo);
+  const difference = endDate.diff(startDate);
+  const differenceHours = Math.floor(difference / (1000 * 60 * 60));
+  const differenceMin = Math.floor((difference % (1000 * 60 * 60)) / (1000 * 60));
+  const differenceDays = Math.ceil(differenceHours / 24);
+
+  let differenceTime = `${differenceDays}D ${differenceHours }H ${differenceMin}M`;
+  if(differenceDays === 0){
+    differenceTime = `${differenceHours }H ${differenceMin }M`;
+  }
+  if(differenceDays === 0 && differenceHours === 0){
+    differenceTime = `${differenceMin}M`;
+  }
+  return differenceTime;
+}
+
+const capitalize = (word) => word[0].toUpperCase() + word.slice(1);
+
+export {humanizePointDueDate, humanizePointDueTime, getDiferenceTime, capitalize};
diff --git a/src/view/event-edit-view.js b/src/view/event-edit-view.js
index 27c883a..befc463 100644
--- a/src/view/event-edit-view.js
+++ b/src/view/event-edit-view.js
@@ -1,159 +1,130 @@
 import {createElement} from '../render.js';
+import { getEvents } from '../mocks/events.js';
+import { humanizePointDueTime, capitalize } from '../utils';
+
+function createEventEditTemplate(event, destinations, offers){
+
+  const pointDestination = destinations.find((destination) => destination.id === event.destination);
+  const typeOffers = offers.find((offer) => offer.type === event.type).offers;
+  const pointOffers = typeOffers.filter((typeOffer) => event.offers.includes(typeOffer.id));
+  const {basePrice, dateFrom, dateTo, type} = event;
+  const {name, description, pictures} = pointDestination;
+  const eventId = event.id;
+
+  const allEventTypes = new Set();
+  getEvents().forEach((getEvent) => allEventTypes.add(getEvent.type));
+  const eventTypes = [...allEventTypes];
 
-function createEventEditTemplate(){
   return `
   <li class="trip-events__item">
-              <form class="event event--edit" action="#" method="post">
-                <header class="event__header">
-                  <div class="event__type-wrapper">
-                    <label class="event__type  event__type-btn" for="event-type-toggle-1">
-                      <span class="visually-hidden">Choose event type</span>
-                      <img class="event__type-icon" width="17" height="17" src="img/icons/flight.png" alt="Event type icon">
-                    </label>
-                    <input class="event__type-toggle  visually-hidden" id="event-type-toggle-1" type="checkbox">
-
-                    <div class="event__type-list">
-                      <fieldset class="event__type-group">
-                        <legend class="visually-hidden">Event type</legend>
-
-                        <div class="event__type-item">
-                          <input id="event-type-taxi-1" class="event__type-input  visually-hidden" type="radio" name="event-type" value="taxi">
-                          <label class="event__type-label  event__type-label--taxi" for="event-type-taxi-1">Taxi</label>
-                        </div>
-
-                        <div class="event__type-item">
-                          <input id="event-type-bus-1" class="event__type-input  visually-hidden" type="radio" name="event-type" value="bus">
-                          <label class="event__type-label  event__type-label--bus" for="event-type-bus-1">Bus</label>
-                        </div>
-
-                        <div class="event__type-item">
-                          <input id="event-type-train-1" class="event__type-input  visually-hidden" type="radio" name="event-type" value="train">
-                          <label class="event__type-label  event__type-label--train" for="event-type-train-1">Train</label>
-                        </div>
-
-                        <div class="event__type-item">
-                          <input id="event-type-ship-1" class="event__type-input  visually-hidden" type="radio" name="event-type" value="ship">
-                          <label class="event__type-label  event__type-label--ship" for="event-type-ship-1">Ship</label>
-                        </div>
-
-                        <div class="event__type-item">
-                          <input id="event-type-drive-1" class="event__type-input  visually-hidden" type="radio" name="event-type" value="drive">
-                          <label class="event__type-label  event__type-label--drive" for="event-type-drive-1">Drive</label>
-                        </div>
-
-                        <div class="event__type-item">
-                          <input id="event-type-flight-1" class="event__type-input  visually-hidden" type="radio" name="event-type" value="flight" checked>
-                          <label class="event__type-label  event__type-label--flight" for="event-type-flight-1">Flight</label>
-                        </div>
-
-                        <div class="event__type-item">
-                          <input id="event-type-check-in-1" class="event__type-input  visually-hidden" type="radio" name="event-type" value="check-in">
-                          <label class="event__type-label  event__type-label--check-in" for="event-type-check-in-1">Check-in</label>
-                        </div>
-
-                        <div class="event__type-item">
-                          <input id="event-type-sightseeing-1" class="event__type-input  visually-hidden" type="radio" name="event-type" value="sightseeing">
-                          <label class="event__type-label  event__type-label--sightseeing" for="event-type-sightseeing-1">Sightseeing</label>
-                        </div>
-
-                        <div class="event__type-item">
-                          <input id="event-type-restaurant-1" class="event__type-input  visually-hidden" type="radio" name="event-type" value="restaurant">
-                          <label class="event__type-label  event__type-label--restaurant" for="event-type-restaurant-1">Restaurant</label>
-                        </div>
-                      </fieldset>
-                    </div>
-                  </div>
-
-                  <div class="event__field-group  event__field-group--destination">
-                    <label class="event__label  event__type-output" for="event-destination-1">
-                      Flight
-                    </label>
-                    <input class="event__input  event__input--destination" id="event-destination-1" type="text" name="event-destination" value="" list="destination-list-1">
-                    <datalist id="destination-list-1">
-                      <option value="Amsterdam"></option>
-                      <option value="Geneva"></option>
-                      <option value="Chamonix"></option>
-                    </datalist>
-                  </div>
-
-                  <div class="event__field-group  event__field-group--time">
-                    <label class="visually-hidden" for="event-start-time-1">From</label>
-                    <input class="event__input  event__input--time" id="event-start-time-1" type="text" name="event-start-time" value="19/03/19 00:00">
-                    &mdash;
-                    <label class="visually-hidden" for="event-end-time-1">To</label>
-                    <input class="event__input  event__input--time" id="event-end-time-1" type="text" name="event-end-time" value="19/03/19 00:00">
-                  </div>
-
-                  <div class="event__field-group  event__field-group--price">
-                    <label class="event__label" for="event-price-1">
-                      <span class="visually-hidden">Price</span>
-                      &euro;
-                    </label>
-                    <input class="event__input  event__input--price" id="event-price-1" type="text" name="event-price" value="">
-                  </div>
-
-                  <button class="event__save-btn  btn  btn--blue" type="submit">Save</button>
-                  <button class="event__reset-btn" type="reset">Delete</button>
-                </header>
-                <section class="event__details">
-                  <section class="event__section  event__section--offers">
-                    <h3 class="event__section-title  event__section-title--offers">Offers</h3>
-
-                    <div class="event__available-offers">
-                      <div class="event__offer-selector">
-                        <input class="event__offer-checkbox  visually-hidden" id="event-offer-luggage-1" type="checkbox" name="event-offer-luggage" checked>
-                        <label class="event__offer-label" for="event-offer-luggage-1">
-                          <span class="event__offer-title">Add luggage</span>
-                          &plus;&euro;&nbsp;
-                          <span class="event__offer-price">30</span>
-                        </label>
-                      </div>
-
-                      <div class="event__offer-selector">
-                        <input class="event__offer-checkbox  visually-hidden" id="event-offer-comfort-1" type="checkbox" name="event-offer-comfort" checked>
-                        <label class="event__offer-label" for="event-offer-comfort-1">
-                          <span class="event__offer-title">Switch to comfort class</span>
-                          &plus;&euro;&nbsp;
-                          <span class="event__offer-price">100</span>
-                        </label>
-                      </div>
-
-                      <div class="event__offer-selector">
-                        <input class="event__offer-checkbox  visually-hidden" id="event-offer-meal-1" type="checkbox" name="event-offer-meal">
-                        <label class="event__offer-label" for="event-offer-meal-1">
-                          <span class="event__offer-title">Add meal</span>
-                          &plus;&euro;&nbsp;
-                          <span class="event__offer-price">15</span>
-                        </label>
-                      </div>
-
-                      <div class="event__offer-selector">
-                        <input class="event__offer-checkbox  visually-hidden" id="event-offer-seats-1" type="checkbox" name="event-offer-seats">
-                        <label class="event__offer-label" for="event-offer-seats-1">
-                          <span class="event__offer-title">Choose seats</span>
-                          &plus;&euro;&nbsp;
-                          <span class="event__offer-price">5</span>
-                        </label>
-                      </div>
-
-                      <div class="event__offer-selector">
-                        <input class="event__offer-checkbox  visually-hidden" id="event-offer-train-1" type="checkbox" name="event-offer-train">
-                        <label class="event__offer-label" for="event-offer-train-1">
-                          <span class="event__offer-title">Travel by train</span>
-                          &plus;&euro;&nbsp;
-                          <span class="event__offer-price">40</span>
-                        </label>
-                      </div>
-                    </div>
-                  </section>
-                </section>
-              </form>
-            </li>`;
+    <form class="event event--edit" action="#" method="post">
+      <header class="event__header">
+        <div class="event__type-wrapper">
+           <label class="event__type  event__type-btn" for="event-type-toggle-${eventId}">
+             <span class="visually-hidden">Choose event type</span>
+             <img class="event__type-icon" width="17" height="17" src="img/icons/${type}.png" alt="Event type icon">
+           </label>
+           <input class="event__type-toggle  visually-hidden" id="event-type-toggle-${eventId}" type="checkbox">
+
+          <div class="event__type-list">
+            <fieldset class="event__type-group">
+              <legend class="visually-hidden">Event type</legend>
+              ${eventTypes.map((eventType) => (
+    `<div class="event__type-item">
+                  <input id="event-type-${eventTypes}-${eventId}" class="event__type-input  visually-hidden" type="radio"
+                    name="event-type" value="${eventType}" ${eventType === type ? 'checked' : ''}>
+                  <label class="event__type-label  event__type-label--${eventType}" for="event-type-${eventType}-${eventId}">${capitalize(eventType)}</label>
+                </div>`
+  )).join('')}
+            </fieldset>
+          </div>
+        </div>
+
+        <div class="event__field-group  event__field-group--destination">
+          <label class="event__label  event__type-output" for="event-destination-${eventId}">
+            ${type}
+          </label>
+          <input class="event__input  event__input--destination" id="event-destination-${eventId}" type="text"
+          name="event-destination" value="${name || ''}" list="destination-list-${eventId}">
+          <datalist id="destination-list-${eventId}">
+            ${destinations.map((destination) => `<option value="${destination.name}"></option>`).join('')}
+          </datalist>
+        </div>
+
+        <div class="event__field-group  event__field-group--time">
+          <label class="visually-hidden" for="event-start-time-${eventId}">From</label>
+          <input class="event__input  event__input--time" id="event-start-time-${eventId}" type="text" name="event-start-time" value="${humanizePointDueTime(dateFrom)}">
+          &mdash;
+          <label class="visually-hidden" for="event-end-time-${eventId}">To</label>
+          <input class="event__input  event__input--time" id="event-end-time-${eventId}" type="text" name="event-end-time" value="${humanizePointDueTime(dateTo)}">
+        </div>
+
+        <div class="event__field-group  event__field-group--price">
+          <label class="event__label" for="event-price-${eventId}">
+            <span class="visually-hidden">Price</span>
+            &euro;
+          </label>
+          <input class="event__input  event__input--price" id="event-price-${eventId}" type="text" name="event-price" value="${basePrice}">
+        </div>
+
+        <button class="event__save-btn  btn  btn--blue" type="submit">Save</button>
+        <button class="event__reset-btn" type="reset">${event.id ? 'Delete' : 'Cansel'}</button>
+        ${event.id ? (
+    `<button class="event__rollup-btn" type="button">
+            <span class="visually-hidden">Open event</span>
+            </button>`
+  ) : ''}
+      </header>
+
+      <section class="event__details">
+        ${typeOffers.length > 0 ?
+    `<section class="event__section  event__section--offers">
+          <h3 class="event__section-title  event__section-title--offers">Offers</h3>
+
+          <div class="event__available-offers">
+
+            ${typeOffers.map((typeOffer)=>(
+    `<div class="event__offer-selector">
+              <input class="event__offer-checkbox  visually-hidden" id="event-offer-${typeOffer.title}-${eventId}" type="checkbox"
+               name="event-offer-${typeOffer.title}" ${pointOffers.some((offer) => offer.id === typeOffer.id) ? 'checked' : ''}>
+              <label class="event__offer-label" for="event-offer-${typeOffer.title}-${eventId}">
+                <span class="event__offer-title">${typeOffer.title}</span>
+                &plus;&euro;&nbsp;
+                <span class="event__offer-price">${typeOffer.price}</span>
+              </label>
+            </div>`
+  )).join('')}
+        </div>
+        </section>`
+    : ''}
+ ${pointDestination ? (
+    `<section class="event__section event__section--destination">
+  <h3 class="event__section-title event__section-title--destination">Destination</h3>
+  <p class="event__destination-description">${description}</p>
+  ${pictures.length > 0 ? (
+      `<div class="event__photos-container">
+  <div class="event__photos-tape">
+ ${pictures.map((picture) => `<img class="event__photo" src="${picture.src}" alt="${picture.description}">`)}
+ </div>
+ </div>`
+    ) : ''}
+    </section>`
+  ) : ''}
+    </section>
+   </form>
+  </li>`;
 }
-
 export default class EventEditView{
+
+  constructor (events, destinations, offers){
+    this.events = events;
+    this.destinations = destinations;
+    this.offers = offers;
+  }
+
   getTemplate(){
-    return createEventEditTemplate();
+
+    return createEventEditTemplate(this.events, this.destinations, this.offers);
   }
 
   getElement(){
diff --git a/src/view/event-item-view.js b/src/view/event-item-view.js
new file mode 100644
index 0000000..f77d110
--- /dev/null
+++ b/src/view/event-item-view.js
@@ -0,0 +1,85 @@
+import {createElement} from '../render.js';
+import { humanizePointDueDate, humanizePointDueTime } from '../utils';
+import {getDiferenceTime} from '../utils.js';
+
+function createEventOffersTemplate(eventOffers) {
+  return eventOffers.map((eventOffer) => (
+    `<li class="event__offer">
+      <span class="event__offer-title">${eventOffer.title}</span>
+      &plus;&euro;&nbsp;
+      <span class="event__offer-price">${eventOffer.price}</span>
+    </li>`
+  )).join('');
+}
+
+function createEventItemTemplate(event, destinations, offers){
+
+  const {basePrice, isFavorite, dateFrom, dateTo, type} = event;
+
+  const typeOffers = offers.find((offer) => offer.type === event.type).offers;
+  const eventOffers = typeOffers.filter((typeOffer) => event.offers.includes(typeOffer.id));
+  const eventDestination = destinations.filter((destination) => destination.id === event.destination);
+
+  const diferenceTime = getDiferenceTime(dateFrom, dateTo);
+
+  return`
+    <li class="trip-events__item">
+      <div class="event">
+      <time class="event__date" datetime="2024-10-18">${humanizePointDueDate(dateFrom)}</time>
+      <div class="event__type">
+        <img class="event__type-icon" width="42" height="42" src="img/icons/${type}.png" alt="Event type icon">
+      </div>
+      <h3 class="event__title">${type} ${eventDestination[0].name}</h3>
+      <div class="event__schedule">
+        <p class="event__time">
+          <time class="event__start-time" datetime="2019-03-18T10:30">${humanizePointDueTime(dateFrom)}</time>
+          &mdash;
+          <time class="event__end-time" datetime="2019-03-18T11:00">${humanizePointDueTime(dateTo)}</time>
+        </p>
+        <p class="event__duration"> ${diferenceTime}</p>
+      </div>
+      <p class="event__price">
+        &euro;&nbsp;<span class="event__price-value">${basePrice}</span>
+      </p>
+      <h4 class="visually-hidden">Offers:</h4>
+      <ul class="event__selected-offers">
+        ${createEventOffersTemplate(eventOffers)}
+      </ul>
+     <button class="event__favorite-btn ${isFavorite ? 'event__favorite-btn--active' : ''} " type="button">
+      <span class="visually-hidden">Add to favorite</span>
+      <svg class="event__favorite-icon" width="28" height="28" viewBox="0 0 28 28">
+        <path d="M14 21l-8.22899 4.3262 1.57159-9.1631L.685209 9.67376 9.8855 8.33688 14 0l4.1145 8.33688 9.2003 1.33688-6.6574 6.48934 1.5716 9.1631L14 21z"/>
+      </svg>
+    </button>
+    <button class="event__rollup-btn" type="button">
+      <span class="visually-hidden">Open event</span>
+    </button>
+  </div>
+</li>
+`;
+}
+
+export default class EventItemView{
+  constructor (event, destinations, offers){
+    this.event = event;
+    this.destinations = destinations;
+    this.offers = offers;
+  }
+
+  getTemplate(){
+    return createEventItemTemplate(this.event, this.destinations, this.offers);
+  }
+
+  getElement(){
+    if(!this.element){
+      this.element = createElement(this.getTemplate());
+    }
+    return this.element;
+  }
+
+  removeElement(){
+    this.element = null;
+  }
+}
+
+
diff --git a/src/view/event-view.js b/src/view/event-view.js
index 2ad8110..189caa7 100644
--- a/src/view/event-view.js
+++ b/src/view/event-view.js
@@ -1,6 +1,7 @@
 import {createElement} from '../render.js';
 
 function createEventTemplate(){
+
   return`
  <li class="trip-events__item">
               <form class="event event--edit" action="#" method="post">
@@ -168,6 +169,8 @@ function createEventTemplate(){
 }
 
 export default class EventView{
+
+
   getTemplate(){
     return createEventTemplate();
   }
diff --git a/src/view/events-items-view.js b/src/view/events-items-view.js
deleted file mode 100644
index dc0736e..0000000
--- a/src/view/events-items-view.js
+++ /dev/null
@@ -1,62 +0,0 @@
-import {createElement} from '../render.js';
-
-function createEventsItemsTemplate(){
-  return`
-    <li class="trip-events__item">
-              <div class="event">
-                <time class="event__date" datetime="2019-03-18">MAR 18</time>
-                <div class="event__type">
-                  <img class="event__type-icon" width="42" height="42" src="img/icons/taxi.png" alt="Event type icon">
-                </div>
-                <h3 class="event__title">Taxi Amsterdam</h3>
-                <div class="event__schedule">
-                  <p class="event__time">
-                    <time class="event__start-time" datetime="2019-03-18T10:30">10:30</time>
-                    &mdash;
-                    <time class="event__end-time" datetime="2019-03-18T11:00">11:00</time>
-                  </p>
-                  <p class="event__duration">30M</p>
-                </div>
-                <p class="event__price">
-                  &euro;&nbsp;<span class="event__price-value">20</span>
-                </p>
-                <h4 class="visually-hidden">Offers:</h4>
-                <ul class="event__selected-offers">
-                  <li class="event__offer">
-                    <span class="event__offer-title">Order Uber</span>
-                    &plus;&euro;&nbsp;
-                    <span class="event__offer-price">20</span>
-                  </li>
-                </ul>
-                <button class="event__favorite-btn event__favorite-btn--active" type="button">
-                  <span class="visually-hidden">Add to favorite</span>
-                  <svg class="event__favorite-icon" width="28" height="28" viewBox="0 0 28 28">
-                    <path d="M14 21l-8.22899 4.3262 1.57159-9.1631L.685209 9.67376 9.8855 8.33688 14 0l4.1145 8.33688 9.2003 1.33688-6.6574 6.48934 1.5716 9.1631L14 21z"/>
-                  </svg>
-                </button>
-                <button class="event__rollup-btn" type="button">
-                  <span class="visually-hidden">Open event</span>
-                </button>
-              </div>
-            </li>
-        `;
-}
-
-export default class EventsItemsView{
-  getTemplate(){
-    return createEventsItemsTemplate();
-  }
-
-  getElement(){
-    if(!this.element){
-      this.element = createElement(this.getTemplate());
-    }
-    return this.element;
-  }
-
-  removeElement(){
-    this.element = null;
-  }
-}
-
-
diff --git a/src/view/sorts-view.js b/src/view/sorts-view.js
index 60081be..51effaa 100644
--- a/src/view/sorts-view.js
+++ b/src/view/sorts-view.js
@@ -1,6 +1,6 @@
 import {createElement} from '../render.js';
 
-function createSortTemplateView(){
+function createSortTemplate(){
   return `
   <form class="trip-events__trip-sort  trip-sort" action="#" method="get">
     <div class="trip-sort__item  trip-sort__item--day">
@@ -33,7 +33,7 @@ function createSortTemplateView(){
 
 export default class SortsView{
   getTemplate(){
-    return createSortTemplateView();
+    return createSortTemplate();
   }
 
   getElement(){