/* window.parameters: */

window.parameters = {"debug":false,"wwwroot":"https:\/\/nakoleprahou.cz","qr_base":"https:\/\/nakoleprahou.cz\/plan","assetroot":"https:\/\/nakoleprahou.cz\/gpx","homepage":"https:\/\/nakoleprahou.cz","gpx_base":"https:\/\/nakoleprahou.cz","api":{"version":"v7","key":"NHSCVBtWCr547LmD3YGrgTmAaowKhxLG","routing":"https:\/\/uc1.umotional.net\/urbancyclers-api\/v7\/routing","zones":"https:\/\/uc1.umotional.net\/urbancyclers-api\/v7\/zones","geocoding":"https:\/\/uc1.umotional.net\/geocoding\/","rekolaPoints":"https:\/\/uc1.umotional.net\/urbancyclers-api\/v7\/bikeSharingInfo?lat=50.0870167&lon=14.4240186&radius=3000","bsPoints":"https:\/\/uc1.umotional.net\/urbancyclers-api\/v7\/bikeSharingInfo?lat=50.0870167&lon=14.4240186&radius=5000","bsPointsParams":"https:\/\/uc1.umotional.net\/urbancyclers-api\/v7\/bikeSharingInfo?lat={lat}&lon={lon}&radius=5000","bsZones":"https:\/\/uc1.umotional.net\/urbancyclers-api\/v7\/zones?lat=50.084009&lon=14.423332","bsZonesParams":"https:\/\/uc1.umotional.net\/urbancyclers-api\/v7\/zones?lat={lat}&lon={lon}","poi_categories":"https:\/\/uc1.umotional.net\/cycle-now\/v4\/mapdata\/layers?locale=cs","pois":"https:\/\/uc1.umotional.net\/cycle-now\/v4\/mapdata\/objects?locale=cs","poi":"https:\/\/uc1.umotional.net\/cycle-now\/v4\/mapdata\/objects\/{id}?locale=cs","gamepoint_tpl":"https:\/\/urbancyclers.com\/img\/disciplines\/%disc.png","avatar_tpl":"https:\/\/uc1.umotional.net\/avatars\/%uid.jpg","route_tpl":"https:\/\/uc1.umotional.net\/cycle-now\/v4\/tracks\/%rid\/public?locale=cs","user_tpl":"https:\/\/uc1.umotional.net\/cycle-now\/v4\/invites\/%uid","isochrones":"https:\/\/uc1.umotional.net\/urbancyclers-api\/v7\/isochrones","trip":{"list":"https:\/\/uc1.umotional.net\/cycle-now\/v3\/trip\/overview?locale={locale}&lat={lat}&lon={lon}","detail":"https:\/\/uc1.umotional.net\/cycle-now\/v3\/trip\/{tripId}?locale={locale}&lat={lat}&lon={lon}","route":"https:\/\/uc1.umotional.net\/cycle-now\/v3\/trip\/trajectory\/{tripId}"},"gpx":{"import":"https:\/\/uc1.umotional.net\/cycle-now\/v4\/tracks\/import","contribute":"https:\/\/uc1.umotional.net\/cycle-now-docs\/#!\/40v44132Tracks\/anonymousTracksImport","anonymous_token":"zMNTDqTqAEwoAvQ3yrRSQg9xR3YPrutDe8GSgkkBPeze3XYmbKohdD3GqD6qMe7F2yzEDJSAaawHJSeENrWNjxzYaPY8YzVd5aWJzswLi5pNEC9eVYYbVcoaKB4fTNJq"}},"favicon":"\/custom\/img\/favicon\/favicon-196x196.png","appstore_url":"https:\/\/apps.apple.com\/us\/app\/na-kole-prahou\/id1213867293","googleplay_url":"https:\/\/play.google.com\/store\/apps\/details?id=com.umotional.ucpraha&hl=cs","me":"https:\/\/nakoleprahou.cz\/components.js?version=v202303231113","lang":"en","bodyClass":"components js","locale":{"default_lang":"cs","langs":["cs","en"]},"fallbackLocales":["en"],"locales":["en","en"],"flavour":"ucpraha","scripts":["https:\/\/api.mapbox.com\/mapbox.js\/v3.2.1\/mapbox.js","https:\/\/unpkg.com\/leaflet-geometryutil","https:\/\/cdn.jsdelivr.net\/npm\/chart.js@2.8.0\/dist\/Chart.min.js","\/js\/lib\/leaflet-polylinedecorator\/dist\/leaflet.polylineDecorator.js","\/planner\/js\/plugins\/L.Control.Locate.js","\/planner\/js\/plugins\/Leaflet.contextmenu\/leaflet.contextmenu.min.js","\/planner\/js\/plugins\/easy-button.js","\/planner\/js\/translator.js","\/planner\/js\/metricSystem.js","\/planner\/js\/imperialSystem.js","\/planner\/js\/unitPrinter.js","\/planner\/js\/p\/feedback.js","\/planner\/js\/p\/city.js","\/planner\/js\/p\/geocoder.js","\/planner\/js\/p\/leg.js","\/planner\/js\/p\/map.js","\/planner\/js\/p\/marker.js","\/planner\/js\/p\/markerListeners.js","\/planner\/js\/p\/options.js","\/planner\/js\/p\/painter.js","\/planner\/js\/p\/plan.js","\/planner\/js\/p\/planner.js","\/planner\/js\/p\/planSignsCreator.js","\/planner\/js\/p\/router.js","\/planner\/js\/p\/solidRoutePainter.js","\/planner\/js\/p\/spinner.js","\/planner\/js\/p\/transparentRoutePainter.js","\/planner\/js\/p\/warnings.js","\/planner\/js\/p\/InstructionsPainter.js","\/planner\/js\/p\/DistancePainter.js","\/planner\/js\/ptlayer.js","\/js\/lib\/Cookies.js","\/js\/lib\/Spinner.js","\/js\/lib\/html5sortable\/html5sortable.min.js","https:\/\/unpkg.com\/axios@1.0.0\/dist\/axios.min.js","https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/vuejs-datepicker\/1.6.2\/vuejs-datepicker.min.js","https:\/\/cdn.jsdelivr.net\/npm\/vue-slider-component@latest\/dist\/vue-slider-component.umd.min.js","https:\/\/unpkg.com\/popper.js@1.16.1\/dist\/umd\/popper.min.js","https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/tippy.js\/2.5.4\/tippy.js","\/js\/PlannerAutocomplete.js","\/js\/Bikesharing.js","\/js\/LocalPlanStorage.js","\/js\/TransportResponse.js","\/js\/lib.js","\/js\/DataStorage.js","\/js\/GeojsonStyler.js","\/js\/DraggableRoutes.js","\/js\/app.js","\/custom\/js\/custom.js"],"styles":["https:\/\/api.mapbox.com\/mapbox.js\/v3.2.1\/mapbox.css","https:\/\/cdn.jsdelivr.net\/npm\/vue-slider-component@latest\/theme\/default.css","https:\/\/fonts.googleapis.com\/css?family=Prompt:300,400,500,600,700&display=swap&subset=latin-ext","\/css\/bootstrap.min.css","\/css\/media.nonresponsive.css","\/css\/non-responsive.css","\/planner\/css\/plugins\/L.Control.Locate.mapbox.css","\/planner\/js\/plugins\/Leaflet.contextmenu\/leaflet.contextmenu.min.css","\/planner\/css\/uc-now.css","\/planner\/css\/uc-planner.css","\/planner\/css\/plugins\/easy-button.css","\/css\/font-awesome.min.css","\/css\/lib.css","\/css\/app.css","\/css\/branding.css","\/custom\/css\/custom.css"],"name":"Na kole Prahou","metaDescription":"Na Kole Prahou is the world\u2019s most advanced navigation engine for cycling and micromobility inside a city.","metaAuthor":"Umotional","title":"Na kole Prahou | Planner","shareTitle":"Na kole Prahou | Planner","shareImage":"\/custom\/img\/og-prague.png","twitterAuthor":"@umotional","iphone":false,"ipad":false,"android":false,"mac":false,"edge":false,"analytics":"\n        <!-- Global site tag (gtag.js) - Google Analytics -->\n        <script type=\"text\/plain\" data-cookiecategory=\"analytics\" async\n            src=\"https:\/\/www.googletagmanager.com\/gtag\/js?id=GA-DUMMY\"><\/script>\n        <script>\n            window.dataLayer = window.dataLayer || [];\n            function gtag() { dataLayer.push(arguments); }\n            gtag('js', new Date());\n\n            gtag('config', 'GA-DUMMY');\n        <\/script>\n        ","skins":{"light":"mapbox:\/\/styles\/umotionals\/cizfoa7mz008m2slmo48x17v9","dark":"mapbox:\/\/styles\/umotionals\/cip74dm00001bdlnp9hay8t4g"},"language":{"app_name":"Na kole Prahou","meta_description":"Na Kole Prahou is the world\u2019s most advanced navigation engine for cycling and micromobility inside a city.","meta_author":"Umotional","generic_title":"Na kole Prahou | Planner","twitter_share_author":"@umotional","toggle_nav":"Toggle navigation","menu.blog":"Blog","rider.head":"Rider","rider.claim":"Urban cycling made simpler and fun","rider.smart.head":"Bike Smarter","rider.smart.claim":"Get personalized expert advice on how best to ride the bike around your city","rider.smart.l1":"Explore your city with the comprehensive <strong>urban cycling maps<\/strong>.","rider.smart.l2":"<strong>Search<\/strong> for the best <strong>cycling routes<\/strong> based on a range of criteria, including safety, comfort and speed.","rider.smart.l3":"Be guided to your destination by a <strong>turn-by-turn navigation<\/strong> optimized for urban use.","rider.smart.l4":"Get <strong>real-time weather<\/strong> and <strong>pollution<\/strong> updates*.","rider.smart.l5":"Don\u2019t have a bike? No problem - plan your trip with a <strong>shared bike<\/strong>.","rider.smart.intermodal":"<strong>Go Intermodal<\/strong>: Combine bike with train, metro or bus to extend your range or dodge unfriendly parts of the city.","rider.smart.electric":"<strong>Go Electric<\/strong>: Find the best electric bike routes with a dedicated <strong>e-bike routing<\/strong> profiles.","rider.ai":"UrbanCyclers are powered by a world-leading cycling artificial intelligence.","rider.more.head":"Bike More","rider.more.claim":"Be motivated by a unique system of rewards. Make cycling your habit","rider.more.l1":"<strong>Track<\/strong> your rides to get <strong>insights<\/strong> into where and how you cycle.","rider.more.l2":"Unlock Explorer, Commuter, Night Rider and a number of other unique <strong>urban cycling badges<\/strong>.","rider.more.l4":"Participate in global and local urban <strong>cycling competitions<\/strong>.","rider.more.dpnk":"Connect with competition <a href=&quot;https:\/\/www.dopracenakole.cz&quot; target=&quot;_blank&quot;><strong>Do pr\u00e1ce na kole 2017<\/strong><img src=&quot;img\/logos\/dpnk_logo.png&quot; style=&quot;display: inline-block; height: 30px ; margin-left: 5px ; &quot;><\/a> and upload your rides with one click.","rider.more.l3":"<strong>Win<\/strong> valuable <strong>real prizes<\/strong> for your cycling achievements. You can win <a href=&quot;https:\/\/www.cyklospeciality.cz\/brompton\/&quot; target=&quot;_blank&quot;><img src=&quot;img\/logos\/brompton_male.png&quot; style=&quot;display: inline-block; height: 30px ; margin-left: 5px ; &quot;><\/strong><\/a> folding bike!","rider.together.head":"Bike United","rider.together.claim":"Unleash the power of the urban cycling community","rider.together.l1":"Motivate and be motivated by <strong>sharing<\/strong> your cycling achievements with the UrbanCyclers community.","rider.together.l2":"<strong>Inform<\/strong> fellow riders about cycling issues and hazards on routes you know.","rider.together.l3":"<strong>Record your rides<\/strong> to make the app smarter and facilitate your city\u2019s <strong>transport planning<\/strong>.","rider.together.l4":"Leverage the power of the <strong>cycling community<\/strong> to get the authorities to do more for cyclists.","rider.cities":"Cities use your data to improve infrastructure!","rider.testimonials.t1.text":"Nice app, routes in Prague are pretty accurate. Also, not draining battery much.","rider.testimonials.t1.name":"Vl Za","rider.testimonials.t2.text":"Useful for bikers Route selection works well, rerouting also. Essential for bikers","rider.testimonials.t2.name":"Lo Ki","rider.testimonials.t3.text":"Great application - helped me to find an interesting yet easy route I didn&quot;t know before!","rider.testimonials.t3.name":"Stepan Kopriva","rider.cfa.head":"Lets ride!","rider.cfa.claim":"Just take your bike and let UrbanCyclers guide you! It is fun!","rider.coverage.head":"Coverage","rider.coverage.claim":"UrbanCyclers are now available in 7 areas across the world","rider.coverage.prague":"Prague","rider.coverage.czechrepublic":"Czech Republic","rider.coverage.sf":"San Francisco & The Bay Area","rider.coverage.california":"California","rider.coverage.berlin":"Berlin","rider.coverage.germany":"Germany","rider.coverage.bratislava":"Bratislava","rider.coverage.slovakia":"Slovakia","rider.coverage.london":"London","rider.coverage.uk":"Great Britain","rider.coverage.milano":"Milan","rider.coverage.italy":"Italy","rider.coverage.bogota":"Bogota","rider.coverage.colombia":"Colombia","rider.coverage.santiago":"Santiago de Chile","rider.coverage.chile":"Chile","rider.mounting.head":"Afraid of mounting your phone ? Don&quot;t be!","rider.mounting.text":"Mounting your phone to the handlebars is easier than you think. The handlebars also protect your phone. After majority of the bike accidents, the bike falls to a side. Follow UrbanCyclers! We give out the rubber holders to our users often for free.","cities.cities":"Cities","cities.menu":"City","cities.head":"UrbanCyclers Suite","cities.claim":"Smart cycling conversion made for cities.","cities.button":"Analyze &middot; Empower &middot; Promote","cities.analyze.head":"Analyze","cities.analyze.claim":"Get deep data-driven insights into cycling in your city","cities.analyze.p":"Use different type of <strong>data analytics<\/strong> (travel time analysis, weak link identification, etc.) for making <strong>smart decisions<\/strong> when investing in cycling infrastructure. <strong>Validate proposed solutions<\/strong> in what-if analytics.","cities.empower.head":"Empower","cities.empower.claim":"Make it easier for your citizens to get out on the bike","cities.empower.p":"Give your citizens <strong>relevant and timely information<\/strong> they need to get around the city on bike <strong>safe and efficient<\/strong>. Help to spread the information created by your city&quot;s <strong>cycling community<\/strong> among other riders.","cities.promote.head":"Promote","cities.promote.claim":"Make more people want to ride","cities.promote.p":"<strong>Engage citizens<\/strong> through urban cycling <strong>games and competitions<\/strong>. With UrbanCyclers you can organize <strong>own campaigns<\/strong>, manage participant and award real prizes to the best.","cities.cyclemore.head":"Make your city cycle more!","cities.cyclemore.claim":"Do you want UrbanCyclers to work in your city? Do you want to increase modal share of cycling?","cities.cyclemore.mailbutton":"Let us know","cities.cyclemore.factsheetbutton":"Download factsheet","cities.technology.head":"Technology","cities.technology.claim":"Software provided as a service with no extra costs","cities.technology.l1":"<strong>Mobile app<\/strong>, <strong>web app<\/strong> and <strong>analytics tools<\/strong> working seamlessly together.","cities.technology.l2":"Provided as a Software as a Service -- <strong>no extra<\/strong> IT infrastructure, maintenance or upgrade <strong>costs<\/strong>.","cities.technology.l3":"Can be delivered as <strong>white box solution<\/strong> with your <strong>city\u2019s branding<\/strong>.","cities.technology.l4":"Can be extended and integrated with other apps and services through <strong>open APIs<\/strong>.","cities.clients.head":"Clients","cities.clients.claim":"Full range of products - from basic analytics to whitelabeling of the whole solution - has found its custommers.","cities.clients.prg":"City of Prague","cities.clients.ipr":"IPR Prague","cities.clients.cdv":"Transportation Research Centre","b2b.b2b":"B2B","b2b.menu":"B2B","b2b.head":"Smart B2B Platform","b2b.claim":"Leverage the power of UrbanCyclers platform for your business","b2b.advert.head":"In-App Advertising","b2b.advert.claim":"Use UrbanCyclers as direct advertising channel to cyclists in each city.","b2b.communication.head":"Communication with users","b2b.communication.claim":"Use UrbanCyclers as direct communication channel to cyclists in each city. Propagate cycling related actions or just a major road closure.","b2b.content.head":"Sponsored Game Content","b2b.content.claim":"Are you a representative of cycling brand? Let your brand propagate in gamification part of UrbanCyclers. You will be respected for giving people gifts for cycling!","b2b.competitions.head":"Hosted Cycling Competition","b2b.competitions.claim":"Are you organizing distributed cycling competition, i.e. Bike2Work campaign? Let us ease your workflow with UrbanCyclers.","b2b.analytics.head":"Cycling data analytics","b2b.analytics.claim":"We can answer any question you might have about cycling in your city. Our behavioral engine is the key.","b2b.engine.head":"Most advanced cycling routing","b2b.engine.claim":"Do you want to cover your area with the best cycling routing in the world? Just let us know.","b2b.whitelabel.head":"Whitelabeled solution","b2b.whitelabel.claim":"Do you like UrbanCyclers and you would love to have similar app with your brand? We whitelabel the whole platform our just specific parts of the app.","b2b.payperride.head":"Cycling incentivization","b2b.payperride.claim":"Do you want to pay people for riding a bike? For insurance companies, large employers or even small ones. Motivate the people with cash! Our AI will help you!","b2b.byapp":"All the platform products are delivered to the audience thanks to the best rated cycling app!","b2b.try.head":"Unlock the value of cycling","b2b.try.claim":"Let us know which product are you interested in and we will give you all the information you may need","locale":"en_US","menu.planner":"Route planner","menu.profile":"Profile","menu.tracks":"Rides","menu.leaderboards":"Leaderboards","menu.badges":"Badges","menu.login":"Login","planner.og.title":"UrbanCyclers Plan: Find your cycling route!","planner.og.description":"New bicycle route planner specialized on urban cycling. Helps you discover new interesting routes. The route planner also recommends how to combine bike with public transport.","planner.origin":"Origin","planner.mid":"Add waypoint","planner.too_much_waypoints":"Too much waypoints, maximum number of waypoints is |XXX0|","planner.destination":"Destination","planner.planpanels.bf.label":"Bike-friendly","planner.planpanels.wf.label":"Walk-friendly","planner.planpanels.bf.tooltip":"A bike-friendly route prioritizing the use of cycle paths, cycle lanes and residential streets over the overall ride time","planner.planpanels.fast.label":"Fast","planner.planpanels.fast.tooltip":"A fast route prioritizing the ride time","planner.planpanels.bpt.label":"Bike on PT","planner.planpanels.bpt.tooltip":"An intermodal route combining cycling with the use of public transport","planner.planpanels.bs.label":"Alternative","planner.planpanels.bs.tooltip":"Trasa vyu\u017e\u00edvaj\u00edc\u00ed bikesharingov\u00fdch kol Rekola.cz","planner.planpanels.a.label":"Alternative","planner.planpanels.a.tooltip":"Alternative route(s) offering different trade-offs between route bike-friendliness and ride time","planner.planpanels.title":"plan","planner.planpanels.elevationGain":"el. gain","planner.planpanels.energy":"energy","planner.planpanels.saves":"saves","planner.planpanels.cycleways.tooltip":"Bike-friendly route segments","planner.planpanels.walkfriendly.tooltip":"Walk-friendly route segments","planner.planpanels.traffic.tooltip":"Percentage of routes with high traffic","planner.planpanels.surface.tooltip":"Percentage of Badly Paved or unpaved routes","planner.planpanels.steepness.tooltip":"Percentage of steep segments with slope greater than 6%","planner.planpanels.exportMobile":"Export to mobile","planner.planpanels.ratePlan":"Rate the route","planner.planpanels.downloadGpx":"Download GPX","planner.legend.less_trafic":"Less traffic","planner.legend.heavy_traffic":"Heavy traffic","planner.legend.unpopular":"Unpopular","planner.legend.popular":"Popular","planner.legend.smoothness":"Smoothness","planner.legend.paved_exl":"Asphalt","planner.legend.paved":"Paved","planner.legend.compacted":"Compacted","planner.legend.unpaved":"Unpaved","planner.legend.bad":"Bad","planner.legend.very_bad":"Very bad","planner.legend.unknown":"Unknown","planner.legend.flat":"Flat","planner.legend.steep":"Steep","planner.legend.PAVED_EXCELLENT":"Asphalt","planner.legend.PAVED_GOOD":"Paved","planner.legend.PAVED_INTERMEDIATE":"Paved","planner.legend.PAVED_BAD":"Badly Paved","planner.legend.PAVED_HORRIBLE":"Horrible","planner.legend.PAVED_IMPASSABLE":"Impassable","planner.legend.UNPAVED_EXCELLENT":"Asphalt","planner.legend.UNPAVED_GOOD":"Badly Paved","planner.legend.UNPAVED_INTERMEDIATE":"Smooth Unpaved","planner.legend.UNPAVED_BAD":"Unpaved","planner.legend.UNPAVED_HORRIBLE":"Bumpy Unpaved","planner.legend.UNPAVED_IMPASSABLE":"Impassable","planner.warnings.steps":"Steps","planner.warnings.steep_uphill":"Steep uphill","planner.warnings.bad_surface":"Bad surface","planner.warnings.high_stress":"High stress","planner.warnings.warning":"Warning","planner.warnings.footway":"Footway","planner.warnings.crossing":"Crossing","planner.warnings.no_entry":"One way street","planner.exception.location_not_found":"At least one location is out of the supported area <br \/><br \/>\nDo you want to test Cyclers in another region? \nContact us at <a href=\"mailto:info@umotional.com\">info@umotional.com<\/a> and we will unlock it for you!","planner.exception.plan_not_found":"No plan has been found for given points","planner.exception.max_waypoints_exceeded":"Maximum number of waypoints has been exceeded","planner.exception.invalid_request":"Provided request has been invalid","planner.exception.server_error":"Internal server error","planner.exception.download_error":"Error while downloading response","transport.error":"No plan has been found for given points","planner.errors.GENERIC":"Sorry, route planner is unavailable. Try again later.","planner.errors.LOCATION_NOT_FOUND":"The locations are outside of the supported countries, or not in the same country.","planner.errors.MAX_WAYPOINTS_EXCEEDED":"Too many waypoints were entered in the request.","planner.errors.PLAN_NOT_FOUND":"No route found. Change the route preferences or try different locations.","planner.errors.ROUTE_NOT_FOUND":"No route found. Change the route preferences or try different locations.","planner.errors.INVALID_REQUEST":"Your request was considered as invalid. Please contact our support.","planner.errors.LIMIT_EXCEEDS":"The application sent too many requests on your behalf. Try again later.","planner.errors.SERVER_ERROR":"Route planner didn\u2019t respond due to an error. Try again later.","planner.errors.TIMEOUT":"Route planner is taking too long to respond. Check your connection or try again later.","planner.errors.NOT_AUTHORIZED":"Your request was considered as unauthorized. Please contact our support.","planner.legend.cycleway":"Cycleway","planner.legend.cyclelane":"Cycle lane","planner.legend.softlane":"Soft lane","planner.selectCity.header":"Select the city","planner.selectCity.callForSelect":"Ride the city!","planner.cities.prague":"Prague","planner.cities.berlin":"Berlin (beta)","planner.cities.bratislava":"Bratislava (beta)","planner.cities.barcelona":"Barcelona (beta)","planner.cities.milan":"Milan (beta)","planner.cities.sanfrancisco":"San Francisco (beta)","planner.cities.madrid":"Madrid (beta)","planner.cities.london":"London (beta)","planner.cities.czech":"Czech Republic (beta)","planner.cities.santiago":"Santiago de Chile (beta)","planner.cities.bogota":"Bogota (beta)","planner.common.close":"Close","planner.common.more":"More","planner.common.thanks":"Thanks!","planner.common.send":"Send","planner.pt.rail":"Train","planner.pt.tram":"Tram","planner.pt.metro":"Subway","planner.pt.underground":"Subway","planner.pt.each":"fq.","planner.pt.station":"Station","planner.ttf.crowd":"Crowd","planner.ttf.pothole":"Pothole","planner.ttf.bike_stand":"Bike stand","planner.ttf.road_closure":"Road closure","planner.ttf.traffic_jam":"Traffic jam","planner.ttf.danger":"Danger","planner.ttf.loading":"Loading...","planner.base.dark":"Dark skin","planner.base.light":"Light skin","planner.overlays.tt":"Reported by community","planner.overlays.pt":"Public transport","planner.bikes.city_bike":"City bike","planner.bikes.electric_bike":"E-bike","planner.bikes.road_bike":"Road bike","planner.bikes.hybrid_bike":"Hybrid bike","planner.bikes.mountain_bike":"Mountain bike","planner.bikes.folding_bike":"Folding bike","planner.bikes.cargo_bike":"Cargo bike","planner.bikes.fixie_bike":"Fixie bike","planner.bikes.other_bike":"Other bike","planner.avoid.climbs":"Avoid steep climbs","planner.avoid.traffic":"Avoid busy streets","planner.avoid.stairs":"Avoid stairs","planner.avoid.pavements":"Avoid pavements","planner.avoid.oneway":"Avoid one-ways","planner.recompute":"Search","planner.just_a_sec":"Jus a sec","planner.pois.add":"P\u0159idat do pl\u00e1nu","planner.pois.destination":"Set as destination","planner.pois.warnings":"Route warnings","planner.spinner.text":"Finding the best routes for you \u2013 hold on please!","profile.settings.loggedAs":"You are logged using Google account","profile.settings.callForNickname":"Seems like you have not set up your nickname yet, let&quot;s do it!","profile.settings.pp":"See our privacy policy","profile.settings.header":"Settings","profile.settings.save":"Save settings","profile.settings.nickname":"Nickname","profile.settings.nickname.placeholder":"John the Biker","profile.settings.language":"Language","profile.settings.unitSystem":"Unit system","profile.settings.unitSystem.metric":"Metric","profile.settings.unitSystem.imperial":"Imperial","planner.rating.head":"Route evaluation","planner.rating.howLike":"How do you like the route?","planner.rating.markIssues":"Mark issues with the route","planner.rating.forbidMan.head":"Forbidden maneuvers","planner.rating.forbidMan.sample":"e.g. turn right when prohibited by traffic signs","planner.rating.notprofile.head":"Not maching the route type","planner.rating.notprofile.sample":"e.g. bike-friendly route is not quiet\/safe enough","planner.rating.danger.head":"Dangerous place","planner.rating.danger.sample":"the route goes through a dangerous place","planner.rating.pavement.head":"The use of pavement","planner.rating.pavement.sample":"the route goes on the pavement even if not necessary","planner.rating.wrongmap.head":"Wrong map","planner.rating.wrongmap.sample":"the underlying map does not correspond to reality","planner.rating.otherissues":"Other issues (optional)","planner.loginmodal.login":"Login","planner.loginmodal.disclaimer":"We will only use the e-mail, name, and profile photo from your Google account. We will not share this information with other UrbanCyclers users. We will not have access to any other information from your account.","planner.modeSelect.modal.header":"Choose your bike","planner.modeSelect.modal.header_alt":"Welcome to {{ appName }}! Let's pick your vehicle","planner.modeSelect.pick":"Change","planner.modeSelect.bicycle":"Bicycle","planner.modeSelect.other":"Other","planner.modeSelect.scooter":"Scooter","planner.modeSelect.walk":"Walk","planner.modeSelect.electric":"Electric","planner.modeSelect.type":"Vehicle type","planner.modeSelect.CITY_BIKE":"City","planner.modeSelect.ROAD_BIKE":"Road","planner.modeSelect.HYBRID_BIKE":"Trek","planner.modeSelect.MOUNTAIN_BIKE":"Mountain","planner.modeSelect.FOLDING_BIKE":"Folding","planner.modeSelect.CARGO_BIKE":"Cargo","planner.modeSelect.FIXIE_BIKE":"Fixie","planner.modeSelect.OTHER_BIKE":"Other","planner.modeSelect.BIG_SCOOTER":"Scooter L","planner.modeSelect.SCOOTER":"Scooter S","planner.modeSelect.RUN":"Run","planner.modeSelect.WALK":"Walk","planner.modeSelect.RECUMBENT_BIKE":"Recumbent","planner.modeSelect.GRAVEL_BIKE":"Gravel","planner.modeSelect.ELECTRIC_BIKE":"Mountain","planner.modeSelect.ELECTRIC_CARGO_BIKE":"Cargo","planner.modeSelect.ELECTRIC_CITY_BIKE":"City","planner.modeSelect.ELECTRIC_FIXIE_BIKE":"Fixie","planner.modeSelect.ELECTRIC_FOLDING_BIKE":"Folding","planner.modeSelect.ELECTRIC_GRAVEL_BIKE":"Gravel","planner.modeSelect.ELECTRIC_HYBRID_BIKE":"Hybrid","planner.modeSelect.ELECTRIC_RECUMBENT_BIKE":"Recumbent","planner.modeSelect.ELECTRIC_ROAD_BIKE":"Road","planner.modeSelect.ELECTRIC_SCOOTER":"Scooter","planner.bikes.I_USE":"I will use","planner.bikes.MY_BIKE":"My bike","planner.bikes.SHARED_BIKE":"Shared","planner.bikes.CITY_BIKE":"City bike","planner.bikes.ROAD_BIKE":"Road bike","planner.bikes.HYBRID_BIKE":"Treking bike","planner.bikes.MOUNTAIN_BIKE":"Mountain bike","planner.bikes.FOLDING_BIKE":"Folding bike","planner.bikes.CARGO_BIKE":"Cargo bike","planner.bikes.FIXIE_BIKE":"Fixie bike","planner.bikes.OTHER_BIKE":"Other bike","planner.bikes.BIG_SCOOTER":"Big scooter","planner.bikes.SCOOTER":"Small scooter","planner.bikes.RUN":"Run","planner.bikes.WALK":"Walk","planner.bikes.RECUMBENT_BIKE":"Recumbent bike","planner.bikes.GRAVEL_BIKE":"Gravel bike","planner.bikes.ELECTRIC_BIKE":"El. Mountain bike","planner.bikes.ELECTRIC_CARGO_BIKE":"El. Cargo bike","planner.bikes.ELECTRIC_CITY_BIKE":"El. City bike","planner.bikes.ELECTRIC_FIXIE_BIKE":"El. Fixie bike","planner.bikes.ELECTRIC_FOLDING_BIKE":"El. Folding bike","planner.bikes.ELECTRIC_GRAVEL_BIKE":"El. Gravel bike","planner.bikes.ELECTRIC_HYBRID_BIKE":"El. Treking bike","planner.bikes.ELECTRIC_RECUMBENT_BIKE":"El. Recumbent bike","planner.bikes.ELECTRIC_ROAD_BIKE":"El. Road bike","planner.bikes.ELECTRIC_SCOOTER":"El. Scooter","planner.modeSelect.okay":"Confirm","planner.isochrones.tooltip":"Range map: How far can you get in 10 minutes?","planner.ios.head":"Thanks for your interest!","planner.ios.text":"UrbanCyclers for iOS is currently under development and will be released in second half of April 2017. Find more information about the app at <a href=&quot;http:\/\/urbancyclers.com&quot; target=&quot;_blank&quot;>http:\/\/urbancyclers.com<\/a>.","planner.download.btn":"Download route","planner.download.head":"Download route","planner.download.skenQR":"Scan the QR code with your phone to load the suggested routes into your mobile app.","planner.download.playstore":"Download {{ appName }} for Android <i class=&quot;fa fa-android &quot; aria-hidden=&quot;true&quot;><\/i> app from <a href=&quot;https:\/\/play.google.com\/store\/apps\/details?id={{ googlePlayId }}&hl=en&quot;>Google Play<\/a>.","planner.download.gpx":"Download the route in the <b>GPX format<\/b>.","planner.download.download_gpx":"Download .gpx","profile.hello":"Hello","profile.status.beginner_cycler":"Beginner Cycler","profile.status.sunday_cycler":"Sunday Cycler","profile.status.urban_cycler":"Urban Cycler","profile.status.messenger":"Messenger","profile.badges.badgesCount":"badges","profile.badges.discover":"Discover all the badges you have earned!","profile.badges.forNext":"You need |XXX0| or |XXX1| to unlock new badge level!","profile.leaderboard.desc":"|XXX0| leaderboard","profile.leaderboard.first":"You are the best!","profile.leaderboard.top10":"You need |XXX0| to be the best!","profile.leaderboard.looser":"You need |XXX0| to reach Top 10!","profile.empty.head":"Welcome to UrbanCyclers!","profile.empty.cfa":"Please download our mobile app and start tracking your rides to enjoy all advantages of your UrbanCyclers profile!","rides.header":"menu.tracks&quot;];","rides.periodSelector.week":"Week","rides.periodSelector.month":"Month","rides.periodSelector.alltime":"All-time","rides.lengthSelector.short":"Short","rides.lengthSelector.midrange":"Mid-range","rides.lengthSelector.long":"Long","rides.track.deleteTrack":"Delete ride","rides.track.renavigate":"Find plan again!","badges.header":"menu.badges&quot;];","badges.toNextLevel":"|XXX0| more to get to the next level!","badges.toFirstLevel":"You need at least |XXX0| to unlock this badge!","badges.bestLevel":"You gained the top level with |XXX0|!","badges.distanceB.name":"Kilometers-eater","badges.distanceB.description":"Each tracked kilometer is counted.","badges.testerB.name":"TesterB","badges.testerB.description":"Test badge","badges.numOfRidesB.name":"Active rider","badges.numOfRidesB.description":"Tracked rides at least |XXX0| long are counted.","badges.globalExplorerB.name":"Explorer","badges.globalExplorerB.description":"Visit locations you have never been to, to unlock new square kilometers.","badges.pragueExplorerB.name":"Prague Explorer","badges.pragueExplorerB.description":"Visit locations you have never been to, to unlock new parts of the city.","badges.commuterB.name":"Daily commuter","badges.commuterB.description":"Commute daily between two locations to gain new leves.","badges.nightB.name":"Night-rider","badges.nightB.description":"Ride your bike during night to unlock this badge. Do not forget a headlight!","badges.hillClimberB.name":"Hill rider","badges.hillClimberB.description":"For each tracked ride with at least 80 meters uphill, you get one climb.","badges.hill":"climbs","badges.rides":"rides","badges.nightrides":"night rides","badges.commutes":"commutes","badges.cityPercent":"city","leaderboards.header":"menu.leaderboards","leaderboards.rides":"rides","leaderboards.periodSelector.week":"Week","leaderboards.periodSelector.month":"Month","leaderboards.periodSelector.allTime":"All-time","leaderboards.regionSelector.myregion":"My region","leaderboards.regionSelector.everywhere":"Everywhere","leaderboards.names.distanceL":"Distance","leaderboards.names.avgSpeedL":"Average speed","leaderboards.names.numOfRidesL":"Number of rides","leaderboards.users.you":"You!","leaderboards.users.average":"Average user","privacypolicy.head":"Privacy Policy","privacypolicy.lastupdate":"Last update","optout.head":"Mailing opt-out","optout.fail":"Opt-out was not successful, please contact us with your request on %s.","optout.success":"Opt-out from mail campaigns in category '%s' was successful. Thank you, have a nice day!","about.head":"About UrbanCyclers","competitions.head":"Competitions","competitions.connect.p1":"To connect the competition with the app, please open the link on your smartphone.","competitions.connect.how.head":"Please follow the these steps:","competitions.connect.how.li1":"In your web browser on your phone (e.g., Safari, Chrome), sign in to your account <a href=&quot;https:\/\/dpnk.dopracenakole.cz\/en\/aplikace\/&quot; target=&quot;_blank&quot;>https:\/\/dpnk.dopracenakole.cz\/en\/aplikace\/<\/a>","competitions.connect.how.li2":"Click on the link &quot;Connect with UrbanCyclers&quot;.","competitions.connect.how.li3":"The application will launch and connects with the competition.","competitions.connect.how.li4":"You will be able to send your ride to the competition on the ride details screen.","competitions.connect.p2":"In case of problems, please contact us at <a href=&quot;mailto:app@urbancyclers.com&quot;>app@urbancyclers.com<\/a>","competitions.userCompId":"Participant key","cancel_subs.head":"How to cancel the subscription","cancel_subs.l1":"Open the Play Store app.","cancel_subs.l2":"In the left drawer tap on Account and then Subscriptions.","cancel_subs.l3":"Select MANAGE and then Cancel subscription.","mount.head":"Smartphone Mount UrbanCyclers","mount.p1":"<strong>Smartphone mount UrbanCyclers<\/strong> is made of durable and high quality silicone. It is very light and compact. It allows you to mount a phone of almost any size. <strong>The mount worth 8 Eur is currently free as a gift<\/strong> for yearly subscription. ","mount.howto":"How to mount your phone?","mount.l1":"Pull the lower part of the mount through the upper part","mount.l2":"Drag the upper part of the mount and turn it on the lower part of the handlebars","mount.l3":"By stretching both ends of the mount we fasten the mount to the handlebars","mount.l4":"Place the phone in the prepared lugs","transport.plan_visibility":"Transparent plans","planner.planpanels.default":"Default","planner.planpanels.stress":"Traffic","planner.planpanels.surface":"Surface","planner.planpanels.surfaceSmoothness":"Surface smoothness","planner.planpanels.popularity":"Popularity","planner.planpanels.slope":"Steepness","planner.planpanels.airQ":"Air quality","planner.autocomplete.not_found":"Nothing found, apologies","transport.rekola":"Use rekola","transport.bikesharing":"Bikesharing","transport.own_bike":"My own bike","planner.direct":"Trip","planner.extra":"Tour","planner.poi_s":"Tour","planner.carfree":"Traffic","planner.flat":"Hills","planner.cleanair":"Clean air","planner.smooth":"Surface","planner.planpanels.elevationDrop":"elev. drop","planner.toggle":"Toggle settings","planner.select_poi":"Selected points-of-interest","planner.add_poi":"Add POIs","planner.descriptors.route_type":"Route type","planner.descriptors.bike_type":"Bike\/scooter type","planner.descriptors.circuit_length":"Ride at least","planner.toggle_route_warnings":"Toggle POIs","planner.graph_edit":"Edit & contribute","planner.slider.zero":"Direct route","planner.surface.excellent":"Asphalt","planner.surface.good":"Paved","planner.surface.intermediate":"Badly Paved","planner.surface.bad":"Smooth Unpaved","planner.surface.horrible":"Unpaved","planner.surface.impassable":"Bumpy Unpaved","planner.surface.unknown":"Unknown","planner.biketype":"I use","planner.more_opts":"More options","planner.elevation_profile":"elevation profile","planner.surface":"surface","planner.planpanels.other_opts":"Route preferences","planner.tooltip.carfree":"Specifies whether special priority should be given to avoiding segments with high car traffic. <br \/>\nZERO LEVEL = suggested routes do not consider car traffic during route planning<br \/>\nFIRST LEVEL = suggested routes avoid segments with high car traffic if reasonably possible (default)<br \/>\nSECOND LEVEL = suggested routes avoid high-traffic segments if at all possible","planner.tooltip.flat":"Specifies whether special priority should be given to avoiding climbs. <br \/>\nZERO LEVEL = suggested routes do not consider climbs during route planning<br \/>\nFIRST LEVEL = suggested routes avoid climbs if reasonably possible; reasonably possible means there exists an alternative route which is not significantly longer or worse in other bike-friendliness factors<br \/>\nSECOND LEVEL = suggested routes avoid climbs if at all possible.","planner.tooltip.smooth":"Specifies how road \/ cycleway surface should be handled.<br \/>\nZERO LEVEL = suggested routes do not consider surface smoothness during route planning<br \/>\nFIRST LEVEL = suggested routes prefer segments with smoother surface but do not avoid non-smooth segments if these are convenient for other reasons<br \/>\nSECOND LEVEL = suggested routes avoid segments with non-smooth surface if at all possible (the setting suitable for road bikes)","planner.carfree.lvl1.title":"Not considered","planner.carfree.lvl1.body":"Car traffic is not considered.","planner.carfree.lvl2.title":"Try to avoid","planner.carfree.lvl2.body":"Avoid car traffic if reasonable.","planner.carfree.lvl3.title":"Avoid","planner.carfree.lvl3.body":"Avoid car traffic even at the cost of a detour.","planner.smooth.lvl3.title":"Require paved","planner.smooth.lvl3.body":"Prefer smooth surface if possible at all. Best for road bikes.","planner.smooth.lvl2.title":"Prefer paved","planner.smooth.lvl2.body":"Prefer segments with smooth surface if not unsuitable due to other route criteria. Best for hybrid bikes.","planner.smooth.lvl1.title":"Prefer unpaved","planner.smooth.lvl1.body":"Prefer unpaved surface. Best for mountain bikes. WARNING: Routes can included segments which are only suitable for mountain bikes.","planner.smooth.lvl0.title":"Not considered","planner.smooth.lvl0.body":"Road surface is not considered.","planner.smooth.lvl05.title":"Mostly not considered","planner.smooth.lvl05.body":"Surface is not considered, except for avoiding segments with a very rough surface.","planner.flat.lvl3.title":"Avoid","planner.flat.lvl3.body":"Avoid steep climbs even at the cost of a detour or an increase in the total climbed height.","planner.flat.lvl2.title":"Try to avoid","planner.flat.lvl2.body":"Avoid steep climbs if reasonable.","planner.flat.lvl1.title":"Not considered","planner.flat.lvl1.body":"Climbs are not considered.","poi.modal.pladeholder":"Search","pages.faq.title":"Frequently Asked Questions","modals.geolocation.head":"One more thing before we get started.","modals.geolocation.btn":"Locate me","modals.geolocation.body":"<p>\n  To ensure the best experience, please allow our site to use your browser geolocation.\n<\/p>\n<p>\n  This will allow us correctly center the map so you <b>don't have to<\/b>.\n<\/p>\n<p>\n  You can also close this window and use the feature later:\n<\/p>\n<p class=\"text-center\">\n  <img src=\"\/v2.5\/img\/geolocate.png\" alt=\"Geolocation button\" style=\"width: 144px; height: 144px; border-radius: 50%; border: 1px solid lightgray;\" \/>\n<\/p>","planner.trip.select":"Pick one of our custom made trips","planner.trip.select_another":"Select another trip","planner.trip.back":"Select another trip","planner.trip.plan":"Select","planner.trip.preview":"View","picker.title":"Pick a version","picker.continue":"Continue to web version","picker.p":"It looks like you are visiting <code>{url}<\/code> <b>from a mobile device<\/b>. <br \/>\nWould you like to try our native mobile app instead?","doc.name":"GPX Importer","doc.title":"GPX Import","doc.desc":"GPX Importer for our cycling navigation. Drop your files here or read our how-to for how to export your data from different devices or apps.","doc.h1":"Import Your Activities","doc.apps":"Please select one of the options below","generic.or":"or","generic.help":"Need help importing your rides? Drop us a line at {{ email }}","user.anonymous":"Anonymous","modal.close":"Close","login.heading":"Sign in","login.lead":"Use the same credentials as you did in our mobile app","login.loading":"Loading","login.error":"Login error","login.again":"Log in again","login.logout":"Logout","login.not_found":"This user was not found","synced.heading.success_full":"Tremendous success","synced.heading.success_partial":"Partial success","synced.heading.failed":"Something went wrong","synced.lead":"%x\/%y files were imported.<br \/><br \/>\nSuccessfully imported rides will be visible in your account shortly.<br \/>","synced.state.READY":"Ready","synced.state.OK":"OK","synced.state.EMPTY_FILE":"We didn't find any tracks in this file","synced.state.INVALID_FILE":"Invalid file format, could not process","synced.state.FILE_ALREADY_EXISTS_SAME_USER":"You have already imported this file before","synced.state.FILE_ALREADY_EXISTS_ANOTHER_USER":"Identical file already exists in our database","synced.state.MISSING_TIMESTAMPS":"This file is missing one or more time-stamps","synced.state.USER_NOT_FOUND":"Unknown user","synced.state.MISSING_TIMESTAMPS.help":"We are unable to import your track correctly \ud83d\ude14.\nCheck if you followed the <a href=\"#\" onclick=\"slide(document.getElementById('btn-guide'), 'devices');\">instructions<\/a> for exporting track from the respective application.\nIf you still don\u2019t know, contact us at <a href=\"mailto:{{ email }}?subject=Ride import issues\">{{ email }}<\/a>.","strava.lead":"Getting your rides","strava.desc":"<p class=\"text-left\">\n  To <b>export a single ride<\/b> from your Strava account, please follow the instructions below.\n<\/p>\n<ol class=\"text-left\">\n  <li>Log in to your Strava account from a computer.<\/li>\n  <li>Open the Activity - Ride page that you want to export.<\/li>\n  <li>On the left, from the more (ellipses) menu, select \"Export GPX\".<\/li>\n  <li>The file will be downloaded to your computer.<\/li>\n  <li>You can upload the GPX file to your account using this import tool.<\/li>\n<\/ol>\n<p class=\"text-left\">\n  In case you would like to <b>export all of your rides at once<\/b>, you need to export the complete archive of your Strava account. To do so, you need to:\n<\/p>\n<ol class=\"text-left\">\n  <li>Log in to your Strava account from a computer.<\/li>\n  <li>Hover over your name in the upper right-hand corner of the Strava page. Choose \"Settings,\" then find the \"My Account\" tab from the menu listed on the Left.<\/li>\n  <li>Select \u201cGet Started\u201d under \u201cDownload or Delete Your Account.\u201d<\/li>\n  <li>Select \u201cRequest your archive\u201d on the next page.<\/li>\n  <li>You will receive an email with a link to download your data (this may take a few hours.) The email will be sent to the email account attached to your Strava profile. (or Facebook profile if you signed-in by Facebook) <\/li>\n  <li>In your data archive, within the zipped folder with all your activities, find your rides folder. Only a folder containing GPX files can be used. In case your rides are downloaded in a different format, you need to proceed as in Case 1. <\/li>\n  <li>You can upload the folder with your rides containing the GPX files to your account using this import tool.<\/li>\n<\/ol>","garmin.lead":"Getting your rides","garmin.desc":"<p class=\"text-left\">\n  To <b>export a single ride<\/b> from your Garmin Connect account, please do the following:\n<\/p>\n<ol class=\"text-left\">\n  <li>Sign in to your Garmin Connect account from a computer.<\/li>\n  <li>In the top left corner, click on the Arrow Icon to expand the Navigation Bar.<\/li>\n  <li>Select \u201cActivities\u201d, then select \u201cAll Activities\u201d.<\/li>\n  <li>Click on the title of the activity you would like to export.<\/li>\n  <li>Click on the gear icon in the top right corner.<\/li>\n  <li>Select \u201cExport to GPX\u201d and save the file to your computer.<\/li>\n  <li>Upload the GPX file to your account using this import tool.<\/li>\n<\/ol>\n<p class=\"text-left\">\n  To <b>export all rides at once<\/b>, you need to request all data associated with your Garmin Connect account:\n<\/p>\n<ol class=\"text-left\">\n  <li>From a computer, sign in to <a href=\"https:\/\/www.garmin.com\/en-US\/account\/profile\/\" target=\"_blank\" rel=\"noopener\">Account Management center<\/a>.<\/li>\n  <li>In the bottom of the page click on the black and white button \u201cManage your data\u201d.<\/li>\n  <li>Select \u201cExport Your data\u201d<\/li>\n  <li>Click on \u201cRequest Data Export\u201d.<\/li>\n  <li>Your request will be submitted and a download link will be emailed to your email account associated with your Garmin Connect account. (This process might take 48 hours upto 30 days.)<\/li>\n  <li>In downloaded data, select the folder containing your cycling activities. They should be in the GPX format. (If they are in a different format, you need to export your rides as described in Case 1.)<\/li>\n  <li>You can upload the GPX files folder to your account using this import tool.<\/li>\n<\/ol>","endomondo.lead":"Getting your rides","endomondo.desc":"<p class=\"text-left\">\n  On December 31st, 2020, Endomondo will be retired and rendered inoperative. \n<\/p>\n<p class=\"text-left\">\n  Your Endomondo data will be deleted after March 31, 2021. If you wish to request access to your data or port it to another platform, it must occur prior to that date.\n<\/p>\n<p class=\"text-left\">\n  To <b>export a single ride<\/b> from your Endomondo account please do the following:\n<\/p>\n<ol class=\"text-left\">\n  <li>Sign in to your Endomondo account from a computer.<\/li>\n  <li>Go to the activity you want to export.<\/li>\n  <li>In the top right corner click on the arrow and select \u201cExport\u201d.<\/li>\n  <li>Select GPX file to download to your computer.<\/li>\n  <li>You can upload the GPX file to your account using this import tool.<\/li>\n<\/ol>\n<p class=\"text-left\">\n  To <b>export all rides<\/b> at once from your Endomondo account, you need to create an archive of all the activities, please proceed as follows:\n<\/p>\n<ol class=\"text-left\">\n  <li>Sign in to your Endomondo account from a computer.<\/li>\n  <li>Visit your <a href=\"https:\/\/www.endomondo.com\/login?returnUrl=~2Fsettings~2Faccount\" target=\"_blank\" rel=\"noopener\">Endomondo Account Settings<\/a>.<\/li>\n  <li>Under \u201cExport and Download Your Data\u201d click on the \u201cGet Started\u201d.<\/li>\n  <li>Click on the \"Create archive\".<\/li>\n  <li>Enter your email and password (or continue with Facebook) to confirm your identity.<\/li>\n  <li>Click on the \"Create archive\".<\/li>\n  <li>Within a few days, you will receive an email containing a confirmation of your download request. <\/li>\n  <li>After a period of time (up to 10 days), you'll receive a new email with a download link - click on the link to download the zip file with your user data. In case your rides are not in GPX format files, you need to export them as described in Case 1.<\/li>\n  <li>You can upload the folder with GPX files to your account using this import tool.<\/li>\n<\/ol>","tracker.lead":"Getting your rides","tracker.desc":"<p class=\"text-left\">\n  To <b>export a single ride<\/b> from your Sports Tracker account, please do the following:\n<\/p>\n<ol class=\"text-left\">\n  <li>Log in to your Sports Tracker account from a computer.<\/li>\n  <li>Select the ride you want to export. <\/li>\n  <li>In the top right corner, you click on \"EDIT\".<\/li>\n  <li>In the top right corner, click on the orange button \"EXPORT\" and save the GPX file to your computer.<\/li>\n  <li>You can upload the GPX file to your account using this import tool.<\/li>\n<\/ol>\n<p class=\"text-left\">\n  To <b>export all rides at once<\/b> from your Sports Tracker account, you need to send a request to all data export:\n<\/p>\n<ol class=\"text-left\">\n  <li>Log into your Sports Tracker account from a computer.<\/li>\n  <li>Click on the \u201cSUPPORT\u201d in the top of the page.<\/li>\n  <li>In the top right, click on the \u201cCONTACT US\u201d orange button.<\/li>\n  <li>Reply to all required questions in the form that opens.<\/li>\n  <li>In the line with the question: \u201cWhat does the issue concern?\u201d Select \u201cexport all data\u201d.<\/li>\n  <li>When the exporting has started, you'll receive an email telling you this.<\/li>\n  <li>You'll receive another email with a link to your data when the exporting has been done.<\/li>\n  <li>In the downloaded ZIP file, find the rides folder. If the rides folder does not contain GPX format files, please follow the instructions from Case 1.<\/li>\n  <li>You can upload the folder with GPX files to your account using this import tool.<\/li>\n<\/ol>","toggle.computer":"From Computer","toggle.computer.lead":"Works for .gpx files","toggle.apps":"App & Devices","toggle.apps.line2":"Strava, Garmin etc.","uploader.file_1":"file","uploader.files_n":"files","uploader.to_sync":"to sync","uploader.sync":"Sync","uploader.file":"File","uploader.date":"Date","uploader.distance":"Distance","uploader.duration":"Duration","uploader.skipped":"{cnt} file(s) were skipped. Only .gpx files are supported. Make sure you process a maximum of 25 files at a time.","uploader.message":"<span class=\"_line1\">\n    Drop your files here, or <span class=\"_highlight\">browse<\/span><br \/>\n<\/span>\n<span class=\"_line2\">\n    Works for .gpx files 25MB or smaller.<br \/>\n    Choose up to 25 files\n<\/span>","uploader.reset":"Remove files and start over","contribute.doc.name":"Contribute Your Rides","contribute.doc.title":"Contribute Your Rides","contribute.doc.desc":"Your data will be used for estimating the flows of cyclists through different segments of the cycling transport network. This estimation is further used for transport planning and optimization of the investments in cycling infrastructure.","contribute.doc.h1":"Contribute Your Rides","contribute.doc.apps":"Please select one of the options below","contribute.generic.or":"or","contribute.user.anonymous":"Anonymous","contribute.modal.close":"Close","contribute.login.heading":"Please log in","contribute.login.lead":"Sign in to your account so we can import your rides.","contribute.login.loading":"Loading","contribute.login.error":"Login error","contribute.login.again":"Log in again","contribute.login.logout":"Logout","contribute.synced.heading.success_full":"Tremendous success","contribute.synced.heading.success_partial":"Partial success","contribute.synced.heading.failed":"Something went wrong","contribute.synced.lead":"%x\/%y files were imported.<br \/><br \/>\nSuccessfully imported rides will be used to improve our services.<br \/>","contribute.synced.state.OK":"OK","contribute.synced.state.EMPTY_FILE":"We didn't find any tracks in this file","contribute.synced.state.INVALID_FILE":"Invalid file format, could not process","contribute.synced.state.FILE_ALREADY_EXISTS_SAME_USER":"You have already imported this file before","contribute.synced.state.FILE_ALREADY_EXISTS_ANOTHER_USER":"Identical file already exists in our database","contribute.synced.state.MISSING_TIMESTAMPS":"This file is missing one or more time-stamps","contribute.strava.lead":"Getting your rides","contribute.strava.desc":"<p class=\"text-left\">\n  To <b>export a single ride<\/b> from your Strava account, please follow the instructions below.\n<\/p>\n<ol class=\"text-left\">\n  <li>Log in to your Strava account from a computer.<\/li>\n  <li>Open the Activity - Ride page that you want to export.<\/li>\n  <li>On the left, from the more (ellipses) menu, select \"Export GPX\".<\/li>\n  <li>The file will be downloaded to your computer.<\/li>\n  <li>You can upload the GPX file to your account using this import tool.<\/li>\n<\/ol>\n<p class=\"text-left\">\n  In case you would like to <b>export all of your rides at once<\/b>, you need to export the complete archive of your Strava account. To do so, you need to:\n<\/p>\n<ol class=\"text-left\">\n  <li>Log in to your Strava account from a computer.<\/li>\n  <li>Hover over your name in the upper right-hand corner of the Strava page. Choose \"Settings,\" then find the \"My Account\" tab from the menu listed on the Left.<\/li>\n  <li>Select \u201cGet Started\u201d under \u201cDownload or Delete Your Account.\u201d<\/li>\n  <li>Select \u201cRequest your archive\u201d on the next page.<\/li>\n  <li>You will receive an email with a link to download your data (this may take a few hours.) The email will be sent to the email account attached to your Strava profile. (or Facebook profile if you signed-in by Facebook) <\/li>\n  <li>In your data archive, within the zipped folder with all your activities, find your rides folder. Only a folder containing GPX files can be used. In case your rides are downloaded in a different format, you need to proceed as in Case 1. <\/li>\n  <li>You can upload the folder with your rides containing the GPX files to your account using this import tool.<\/li>\n<\/ol>","contribute.garmin.lead":"Getting your rides","contribute.garmin.desc":"<p class=\"text-left\">\n  To <b>export a single ride<\/b> from your Garmin Connect account, please do the following:\n<\/p>\n<ol class=\"text-left\">\n  <li>Sign in to your Garmin Connect account from a computer.<\/li>\n  <li>In the top left corner, click on the Arrow Icon to expand the Navigation Bar.<\/li>\n  <li>Select \u201cActivities\u201d, then select \u201cAll Activities\u201d.<\/li>\n  <li>Click on the title of the activity you would like to export.<\/li>\n  <li>Click on the gear icon in the top right corner.<\/li>\n  <li>Select \u201cExport to GPX\u201d and save the file to your computer.<\/li>\n  <li>Upload the GPX file to your Account using this import tool.<\/li>\n<\/ol>\n<p class=\"text-left\">\n  To <b>export all rides at once<\/b>, you need to request all data associated with your Garmin Connect account:\n<\/p>\n<ol class=\"text-left\">\n  <li>From a computer, sign in to <a href=\"https:\/\/www.garmin.com\/en-US\/account\/profile\/\" target=\"_blank\" rel=\"noopener\">Account Management center<\/a>.<\/li>\n  <li>In the bottom of the page click on the black and white button \u201cManage your data\u201d.<\/li>\n  <li>Select \u201cExport Your data\u201d<\/li>\n  <li>Click on \u201cRequest Data Export\u201d.<\/li>\n  <li>Your request will be submitted and a download link will be emailed to your email account associated with your Garmin Connect account. (This process might take 48 hours upto 30 days.)<\/li>\n  <li>In downloaded data, select the folder containing your cycling activities. They should be in the GPX format. (If they are in a different format, you need to export your rides as described in Case 1.)<\/li>\n  <li>You can upload the GPX files folder to your account using this import tool.<\/li>\n<\/ol>","contribute.endomondo.lead":"Getting your rides","contribute.endomondo.desc":"<p class=\"text-left\">\n  On December 31st, 2020, Endomondo will be retired and rendered inoperative. \n<\/p>\n<p class=\"text-left\">\n  Your Endomondo data will be deleted after March 31, 2021. If you wish to request access to your data or port it to another platform, it must occur prior to that date.\n<\/p>\n<p class=\"text-left\">\n  To <b>export a single ride<\/b> from your Endomondo account please do the following:\n<\/p>\n<ol class=\"text-left\">\n  <li>Sign in to your Endomondo account from a computer.<\/li>\n  <li>Go to the activity you want to export.<\/li>\n  <li>In the top right corner click on the arrow and select \u201cExport\u201d.<\/li>\n  <li>Select GPX file to download to your computer.<\/li>\n  <li>You can upload the GPX file to your account using this import tool.<\/li>\n<\/ol>\n<p class=\"text-left\">\n  To <b>export all rides<\/b> at once from your Endomondo account, you need to create an archive of all the activities, please proceed as follows:\n<\/p>\n<ol class=\"text-left\">\n  <li>Sign in to your Endomondo account from a computer.<\/li>\n  <li>Visit your <a href=\"https:\/\/www.endomondo.com\/login?returnUrl=~2Fsettings~2Faccount\" target=\"_blank\" rel=\"noopener\">Endomondo Account Settings<\/a>.<\/li>\n  <li>Under \u201cExport and Download Your Data\u201d click on the \u201cGet Started\u201d.<\/li>\n  <li>Click on the \"Create archive\".<\/li>\n  <li>Enter your email and password (or continue with Facebook) to confirm your identity.<\/li>\n  <li>Click on the \"Create archive\".<\/li>\n  <li>Within a few days, you will receive an email containing a confirmation of your download request. <\/li>\n  <li>After a period of time (up to 10 days), you'll receive a new email with a download link - click on the link to download the zip file with your user data. In case your rides are not in GPX format files, you need to export them as described in Case 1.<\/li>\n  <li>You can upload the folder with GPX files to your account using this import tool.<\/li>\n<\/ol>","contribute.tracker.lead":"Getting your rides","contribute.tracker.desc":"<p class=\"text-left\">\n  To <b>export a single ride<\/b> from your Sports Tracker account, please do the following:\n<\/p>\n<ol class=\"text-left\">\n  <li>Log in to your Sports Tracker account from a computer.<\/li>\n  <li>Select the ride you want to export. <\/li>\n  <li>In the top right corner, you click on \"EDIT\".<\/li>\n  <li>In the top right corner, click on the orange button \"EXPORT\" and save the GPX file to your computer.<\/li>\n  <li>You can upload the GPX file to your account using this import tool.<\/li>\n<\/ol>\n<p class=\"text-left\">\n  To <b>export all rides at once<\/b> from your Sports Tracker account, you need to send a request to all data export:\n<\/p>\n<ol class=\"text-left\">\n  <li>Log into your Sports Tracker account from a computer.<\/li>\n  <li>Click on the \u201cSUPPORT\u201d in the top of the page.<\/li>\n  <li>In the top right, click on the \u201cCONTACT US\u201d orange button.<\/li>\n  <li>Reply to all required questions in the form that opens.<\/li>\n  <li>In the line with the question: \u201cWhat does the issue concern?\u201d Select \u201cexport all data\u201d.<\/li>\n  <li>When the exporting has started, you'll receive an email telling you this.<\/li>\n  <li>You'll receive another email with a link to your data when the exporting has been done.<\/li>\n  <li>In the downloaded ZIP file, find the rides folder. If the rides folder does not contain GPX format files, please follow the instructions from Case 1.<\/li>\n  <li>You can upload the folder with GPX files to your account using this import tool.<\/li>\n<\/ol>","contribute.toggle.computer":"Contribute","contribute.toggle.computer.lead":"Works for .gpx files","contribute.toggle.apps":"Guides","contribute.toggle.apps.line2":"How to export","contribute.uploader.file_1":"file","contribute.uploader.files_n":"files","contribute.uploader.to_sync":"to process","contribute.uploader.sync":"Contribute","contribute.uploader.file":"File","contribute.uploader.date":"Date","contribute.uploader.distance":"Distance","contribute.uploader.duration":"Duration","contribute.uploader.skipped":"{cnt} file(s) were skipped. Only .gpx files are supported. Make sure you process a maximum of 25 files at a time.","contribute.uploader.message":"<span class=\"_line1\">\n    Drop your files here, or <span class=\"_highlight\">browse<\/span><br \/>\n<\/span>\n<span class=\"_line2\">\n    Works for .gpx files 25MB or smaller.<br \/>\n    Choose up to 25 files\n<\/span>","contribute.anonymous.welcome":"Are you using different app or gadget? And you still want your data to be useful for city and transportation planning? Contribute them here! Your data will be anonymized and used in aggregated form.","contribute.anonymous.faq_q1":"How will be my data used?","contribute.anonymous.faq_a1":"Your data will be used for estimating the flows of cyclists through different segments of the cycling transport network. This estimation is further used for transport planning and optimization of the investments in cycling infrastructure.","contribute.anonymous.faq_q2":"How do you anonymize my data?","contribute.anonymous.faq_a2":"We remove first 200-300 hundred meters of the trajectory. In the analysis outputs no raw data is used. The data is aggregated with data from other cyclists.","contribute.anonymous.faq_q3":"Where do I get the GPX file?","contribute.anonymous.faq_a3":"You can download GPX from your app\u2019s\/gadget\u2019s profile. See our <a href=\"#\" onclick=\"slide(document.getElementById('btn-guide'), 'devices');\">guide<\/a> for most used services.","planner.cookies.message":"This page uses Cookies to deliver it's services","planner.mapobject.likes":"likes","planner.mapobject.dislikes":"dislikes","planner.mapobject.comments":"comments","planner.traveler.title":"I travel with","planner.traveler.alone":"Alone","planner.traveler.in_group":"Ina group","planner.traveler.with_children":"With children","download_plan":"Download plan","time":"Time","toggle_isochrones":"Show range map","transport.avoid_pollution":"Polluted areas","planner.avoid_pollution.lvl1.title":"Not considered","planner.avoid_pollution.lvl1.body":"Air pollution is not considered.","planner.avoid_pollution.lvl2.title":"Try to avoid","planner.avoid_pollution.lvl2.body":"Avoid polluted areas if reasonable.","planner.avoid_pollution.lvl3.title":"Avoid","planner.avoid_pollution.lvl3.body":"Avoid polluted areas even at the cost of a detour or an increase in the total climbed height.","invite.title":"Cycling Team {{ team }}","invite.h1":"Cycling Team <b>{{ team }}<\/b>","invite.h2":"Team description","invite.h3":"How to join a team","invite.step1":"Open the {{ appName }} app, if you don\u2019t already have it you can download it using the links above, and go to your profile.","invite.step2":"Click on \"Join a team\".","invite.step3":"Popup will appear. Enter the code <code>{{ code }}<\/code> and hit \"Submit\".","invite.step4":"Congratulation!  \ud83c\udf89<br \/>  You\u2019ve joined {{ team }}.","invite.step5":"If you have any questions please contact us at <a href=\"mailto:info@smartdublin.ie\">info@smartdublin.ie<\/a>","invite.code":"Unique code of this team","invite.copy":"Copy","invite.copied":"Copied!","invite.stats":"Statistics","members.members":"Team members","members.distance":"Team total distance this month","members.rides":"Team total rides this month","trip.has_invited_you":"invited you to a ride!","trip.date":"Date","trip.time":"Time","trip.trip_notes":"Notes","trip.match":"Match","trip.distance":"Distance","trip.elevation":"Elevation gain","trip.accept":"Accept","trip.trip_attendees":"Ride participants","trip.photos":"Pictures from this area","3rd.title":"%name wants you to join {{ appName }}, community-driven trip planner","3rd.share_title":"%name wants you to join {{ appName }}","3rd.title_nodata":"We invite you to join {{ appName }}, community-driven trip planner","3rd.h1":"<strong>%name<\/strong> wants you to join <strong>{{ appName }}<\/strong>,<br \/> Community-driven <strong>trip<\/strong> planner.","3rd.h1_nodata":"We invite you to join <strong>{{ appName }}<\/strong>,<br \/> Community-driven <strong>trip<\/strong> planner.","3rd.discount":"Voucher","3rd.download":"Download the <strong>{{ appName }}<\/strong> app for iOS & Android","3rd.app_description":"New bicycle route planner considering the air-quality along streets. Helps you discover new interesting routes with the cleanest air.","3rd.meta_description":"New bicycle route planner considering the air-quality along streets. Helps you discover new interesting routes with the cleanest air.","3rd.footer_txt":"Travel with <strong>{{ appName }}<\/strong><br \/>... and enjoy cycling","3rd.footer_copyright":"Made for cyclists","3rd.30days":"30 days","3rd.free":"free","3rd.roadmap":"Ride map","3rd.performance":"Performance","3rd.gamepoints":"Gamepoints","3rd.comments":"Comments","3rd.likes":"Likes","3rd.bike_friendliness":"Bike friendliness","3rd.total_time":"Total time","3rd.total_distance":"Total distance","3rd.energy":"Energy","3rd.raised_h_meters":"Elevation gain","3rd.speed":"Avg. speed","3rd.co2":"CO2","3rd.Total time":"Total time","3rd.elevation":"Elevation","3rd.invite_friend":"Invite friend","3rd.invite_friend_p":"Invite <b>friend<\/b> from your city and enjoy the fun together","3rd.today":"Today","3rd.best_riders":"Best riders","3rd.feedback":"Feedback","3rd.news":"News","3rd.rides":"Rides","3rd.riders":"Riders","3rd.cooperation":"In cooperation with:","3rd.no_comments":"No comment","3rd.savings":"Savings","3rd.show":"Show","3rd.error_404_h1":"Whoops!","3rd.error_404_lead":"Error 404","3rd.error_404_p":"This page was not found.","3rd.error_404_continue":"Continue","3rd.error_500_h1":"Whoops!","3rd.error_500_lead":"Error 500","3rd.error_500_p":"An error occured while processing your request.","3rd.error_500_continue":"Continue","pages.privacy.title":"Privacy Policy","pages.privacy.parts.since":"<p>\n  <em>This Privacy Policy is valid from {{ validFrom }}.<\/em>\n<\/p>","pages.privacy.parts.a1":"<p>\n  Your privacy is important to us. This privacy policy explains what personal data we collect from you, how we use it,\n  how we protect them, and what are your rights with respect to GDPR (General Data Protection Regulation). This policy\n  applies to the product {{ appName }} and all its components.\n<\/p>","pages.privacy.parts.b0":"<h2 class=\"h2\">Who is the data controller?<\/h2>","pages.privacy.parts.b1":"<p>\n  Umotional s.r.o. is the data controller for personal data we collect through {{ appName }} subject to this\n  statement. Our address is Umotional s.r.o., B\u011blehradsk\u00e1 858\/23, 120 00 Praha 2, Czech Republic.\n<\/p>","pages.privacy.parts.c0":"<h2 class=\"h2\">How you can contact us?<\/h2>","pages.privacy.parts.c1":"<p>\n  If you have a privacy concern or a question for the Chief Privacy Officer of our company, please contact us by using\n  email <a href=\"mailto:{{ contactEmail }}\">{{ contactEmail }}<\/a>. We will respond to questions or concerns within 30\n  days.\n<\/p>","pages.privacy.parts.d0":"<h2 class=\"h2\">Personal Data We Collect after Sign in to {{ appName }} Account<\/h2>","pages.privacy.parts.d1":"<p>With {{ appName }} account, you can sign into all parts of {{ appName }} application. Your personal\n  {{ appName }} account is automatically created when you first login using authentication by one of our\n  partners (Google, Facebook). Your personal data created or set up in {{ appName }} app are securely stored in\n  your {{ appName }} account and are not linked to the provider you used to sign in.\n<\/p>","pages.privacy.parts.d2":"<p>In order to <strong>provide and improve {{ appName }}<\/strong>, we process the following three categories of\n  personal data <strong>based on your consent with this privacy policy.<\/strong>. We process this data for a period,\n  during which we provide you the {{ appName }} service (i.e., until the withdrawal of your consent or until\n  the deletion your {{ appName }} account).\n<\/p>","pages.privacy.parts.d3":"<ol>\n  <li><strong>Contact data<\/strong>. We collect your nickname, email address and profile photo.<\/li>\n  <li><strong>Tracked rides and location data<\/strong>. We collect your tracked rides and data about your location.\n        Location data can be Global Position System (GPS) data, as well as data identifying nearby cell towers and Wi-Fi\n        hotspots.<\/li>\n  <li><strong>Usage data<\/strong>. We collect data about how you and your device interact with us and {{ appName }}. For example, we collect:\n    <ul>\n      <li>\n        <strong>Product use data<\/strong>. We collect data about the features you use.\n      <\/li>\n      <li>\n        <strong>Error reports and performance data<\/strong>.\n        We collect data about the performance of {{ appName }} and any problems you experience with them. This data helps us to diagnose problems and to\n        improve {{ appName }}. Error reports can include data such as the type or severity of the\n        problem, details of the software or hardware related to an error, contents of files you were using when\n        an error occurred, and data about other software on your device.\n      <\/li>\n    <\/ul>\n  <\/li>\n<\/ol>","pages.privacy.parts.d4":"<p>We use the data in the following ways:<\/p>","pages.privacy.parts.d5":"<ul>\n  <li><strong>Providing {{ appName }}<\/strong>. We use data to carry out your transactions with us and to\n        provide {{ appName }} to you. {{ appName }} include personalized features and recommendations that\n        enhance your productivity and enjoyment, and tailor your experiences based on your activities, interests and\n        location.\n  <\/li>\n  <li>\n    <strong>Customer support<\/strong>.\n      We use data to diagnose product problems, repair customers' devices, and\n      provide other customer care and support services.\n  <\/li>\n  <li>\n    <strong>{{ appName }} improvement<\/strong>.\n    We use data to continually improve {{ appName }},\n    including adding new features or capabilities, such as using error reports to improve security features, or\n    using usage data to determine what new features to prioritize.\n  <\/li>\n  <li>\n    <strong>Security, safety and dispute resolution<\/strong>.\n    We use data to protect the security and safety of our\n    products and our customers, to detect and prevent fraud, to confirm the validity of software licenses, to\n    resolve disputes and enforce our agreements.\n  <\/li>\n  <li>\n    <strong>Business operations<\/strong>.\n    We use data to develop aggregate analysis and business intelligence that\n    enable us to operate, protect, make informed decisions, and report on the performance of our business.\n  <\/li>\n  <li>\n    <strong>Communication<\/strong>.\n    We use data we collect to deliver and personalize our communications with you.\n    For example, we may contact you by email or other means to inform you when a subscription is ending, let you\n    know when security updates are available, update you or inquire about a service or repair request, invite you to\n    participate in a survey, or tell you that you need to take action to keep your account active.\n  <\/li>\n<\/ul>","pages.privacy.parts.d6":"<p>\n  For <strong>sending commercial communications<\/strong> in accordance with the Act No. 480\/2004 Coll. in the form of\n  email newsletters containing offers, information and news, we process your <strong>email address based on our\n  legitimate interest<\/strong>. We process the data for an indefinite period until the recipient unsubscribes from\n  the subscription.\n<\/p>","pages.privacy.parts.e0":"<h2 class=\"h2\">Data We Collect without Signing in to {{ appName }} Account<\/h2>","pages.privacy.parts.e1":"<p>For the provision and improvement of {{ appName }}, we process the usage data <strong>based on our legitimate\n  interest for 2 years<\/strong>. The data includes product usage data, error reports, and performance data. To\n  process the data, we use external processors described in the following section.\n<\/p>","pages.privacy.parts.f0":"<h2 class=\"h2\">Transfer of personal data to third parties<\/h2>","pages.privacy.parts.f1":"<p>\n  Most of the processing operations are handled by ourselves and we do not need the 3rd parties for them. In order to\n  provide some specific processing operations that we cannot provide ourselves, we use the services and applications\n  of processors who specialize in the processing and are in compliance with the GDPR. To process the product\n  <strong>usage data<\/strong>, we use the following data processors:\n<\/p>","pages.privacy.parts.f2":"<ul>\n  <li>Google Analytics (<a href=\"https:\/\/www.google.com\/analytics\/terms\/cz.html\">Terms of Service<\/a>)<\/li>\n  <li>Facebook Analytics (<a href=\"https:\/\/en-us.facebook.com\/about\/privacy\">Data Policy<\/a>)<\/li>\n  <li>Firebase (<a href=\"https:\/\/firebase.google.com\/support\/privacy\/\">Privacy Policy<\/a>)<\/li>\n  <li>\n    Fabric Answers (<a href=\"https:\/\/fabric.io\/dpst.pdf\">Data Processing and Security Terms<\/a>) processes\n    Installation UUID, Android IDs, IP addresses for the period of 180 days.\n  <\/li>\n<\/ul>","pages.privacy.parts.f3":"<p>\n  We use Fabric Crashlytics to process <strong>error reports<\/strong> based on \n  <a href=\"https:\/\/fabric.io\/dpst.pdf\">Data Processing and Security Terms<\/a>. They process Installation UUID and\n  error reports for the period of 90 days.\n<\/p>","pages.privacy.parts.g0":"<h2 class=\"h2\">Your Rights in Relation to the Protection of Personal Data<\/h2>","pages.privacy.parts.g1":"<p>\n  You have a number of rights in relation to the protection of your personal data. If you wish to use any of these\n  rights, please contact us via e-mail <a href=\"mailto:{{ contactEmail }}\">{{ contactEmail }}<\/a>. We will process your requests within 30 days.\n<\/p>","pages.privacy.parts.g2":"<p>\n  You have the <strong>right to information<\/strong> that is already fulfilled by this information page with the\n  privacy policy. You can use your <strong>right to access<\/strong> and we will send you what personal data about you\n  is processed and why. If anything changes or you find your personal information outdated or incomplete, you have the\n  <strong>right to add and change<\/strong> your personal information.\n<\/p>","pages.privacy.parts.g3":"<p>\n  You have the <strong>right to restrict the processing<\/strong> of your personal data if you think we are processing\n  your inaccurate data or you think we are processing the data illegally, but you do not want to delete all the data\n  or if you object to the processing. You can restrict the range of personal data or processing purposes. (For\n  example, unsubscribing from the newsletter restricts the purpose of processing to send commercial communications.)\n  You may also revoke the consent to the processing of your personal information. After the restriction or revocation\n  of the consent, a part of or whole {{ appName }} service may not be available to you.\n<\/p>","pages.privacy.parts.g4":"<p>\n  If you would like to take your personal information and transfer it to someone else, you have the <strong>right of\n  data portability<\/strong>. We will deliver your personal data in machine-readable form.\n<\/p>","pages.privacy.parts.g5":"<p>\n  We do not want to forget about you, but if you wish, you have the <strong>right to erasure(deletion)<\/strong>. In this case, we\n  will erase(delete) all your personal data from the system and backups. We will notify you by e-mail about the completion of\n  the erasure.\n<\/p>","pages.privacy.parts.g6":"<p>\n  If you feel that we do not comply with the law with your personal data, you have the <strong>right to appeal<\/strong>\n  at any time to the Office for Personal Data Protection. We will be very pleased if you first inform us about this\n  suspicion so we can do something about it and correct any misconduct.\n<\/p>","pages.privacy.parts.g7":"<p>\n  Emails with inspiration, articles or products and services are sent to you if you are our customer based on our\n  legitimate interest. <strong>You can unsubscribe via the unsubscribe link<\/strong> in each email.\n<\/p>","pages.privacy.parts.h0":"<h2 class=\"h2\">Cookies and Similar Technologies<\/h2>","pages.privacy.parts.h1":"<p>\n  We use cookies (small text files placed on your device) and similar technologies to provide our websites and online\n  services and help collect data. The text in a cookie often consists of a string of numbers and letters that uniquely\n  identifies your computer, but it can contain other information as well. {{ appName }} use other identifiers,\n  such as the internal ID, for similar purposes. We perceive this as our legitimate interest because we believe that\n  by using cookies we can deliver even better services to you.\n<\/p>","pages.privacy.parts.h2":"<p>\n  We use cookies and similar technologies for several purposes, including:\n<\/p>","pages.privacy.parts.h3":"<ul>\n  <li>\n    <strong>Storing your Preferences and Settings<\/strong>. Settings that {{ appName }} to operate correctly\n    or that maintain your preferences over time may be stored on your device. For example, if you enter your city,\n    we may store that data in a cookie so that you will see the relevant part of the map when you return to the\n    site.\n  <\/li>\n  <li>\n    <strong>Sign-in and Authentication<\/strong>. When you sign in, we store a unique ID number, and the time you\n        signed in, in an encrypted cookie on your device. This cookie allows you to move from page to page within the\n        site without having to sign in again on each page.\n  <\/li>\n  <li>\n    <strong>Analytics<\/strong>. In order to provide {{ appName }}, we use cookies and other identifiers to\n    gather usage and performance data. For example, we use cookies to count the number of unique visitors to a web\n    page or service and to develop other statistics about the operations of our products.\n  <\/li>\n<\/ul>","pages.privacy.parts.h4":"<p>\n  We entrusted the following data processors to do web analytics for us:\n<\/p>","pages.privacy.parts.h5":"<ul>\n  <li>Google Analytics (<a href=\"https:\/\/www.google.com\/analytics\/terms\/cz.html\">Terms of Serice<\/a>)<\/li>\n  <li>Facebook Pixel (<a href=\"https:\/\/en-us.facebook.com\/about\/privacy\">Data Policy<\/a>)<\/li>\n<\/ul>","pages.privacy.parts.h6":"<p>\n  In other cases, it is because our web pages contain content from third parties, such as videos or news content.\n  Because your browser connects to those third parties' web servers to retrieve that content, those third parties are\n  able to set or read their own cookies on your device and may collect information about your online activities across\n  websites or online services.\n<\/p>","pages.privacy.parts.h7":"<p>\n  <strong>How you can control cookies?<\/strong> Most web browsers automatically accept cookies but provide controls\n  that allow you to block or delete them. For example, in Microsoft Edge, you can block or delete cookies by clicking\n  <strong>Settings \u2026 Privacy \u2026 Cookies<\/strong>. Instructions for blocking or deleting cookies in other browsers may\n  be available in each browser's privacy or help documentation.\n<\/p>","pages.privacy.parts.h8":"<p>\n  Certain features of {{ appName }} depend on cookies. Please be aware that if you choose to block cookies, you\n  may not be able to sign in or use those features, and preferences that are dependent on cookies may be lost. If you\n  choose to delete cookies, settings and preferences controlled by those cookies, including advertising preferences,\n  will be deleted and may need to be recreated.\n<\/p>","pages.privacy.parts.i0":"<h2 class=\"h2\">Security of Personal Data<\/h2>","pages.privacy.parts.i1":"<p>\n  We are committed to protecting the security of your personal data. We use a variety of security technologies and\n  procedures to help protect your personal data from unauthorized access, use or disclosure. When we transmit personal\n  data over the Internet, we protect it through the use of encryption.\n<\/p>","pages.privacy.parts.i2":"<p>\n  We would like to assure you that our employees and co-workers who process your personal data are required to maintain\n  confidentiality about your personal data and about security measures whose disclosure could compromise the security\n  of your personal data.\n<\/p>","pages.privacy.parts.i3":"<p>Without your approval, your personal data will not be shared with any 3rd party.<\/p>","pages.privacy.parts.j0":"<h2 class=\"h2\">Where We Store and Process Personal Data<\/h2>","pages.privacy.parts.j1":"<p>\n  We store and process personal data exclusively in the European Economic Area or in countries, which guarantee a level\n  of protection that meet the requirements of the European Commission.\n<\/p>","pages.privacy.parts.k0":"<h2 class=\"h2\">Preview Releases<\/h2>","pages.privacy.parts.k1":"<p>\n  Our company offers preview, insider, beta or other pre-release {{ appName }} and features (\"previews\") to\n  enable you to evaluate them while providing feedback, including performance and usage data, to our company. As a\n  result, previews can automatically collect additional data, provide fewer controls, and otherwise employ different\n  privacy and security measures than those typically present in our products. If you participate in previews, we may\n  contact you about your feedback or your interest in continuing to use the product after general release.\n<\/p>","pages.privacy.parts.l0":"<h2 class=\"h2\">Changes to This Privacy Policy<\/h2>","pages.privacy.parts.l1":"<p>\n  We will update this privacy statement when necessary to reflect changes in {{ appName }}. When we post changes\n  to this statement, we will revise the \"last updated\" date at the top of the statement. If there are material changes\n  to the statement or in how we will use your personal data, we will notify you either by prominently posting a notice\n  of such changes before they take effect or by directly sending you a notification.\n<\/p>","pages.about.title":"About","pages.about.parts.a":"<p>\n  {{ appName }} is a modern application for urban cyclists. It finds the best routes through the city given\n  your detailed requirements and increases the joy during the ride.\n<\/p>","pages.about.parts.b":"<p>\n  To make things easier, the mobile app {{ appName }} guides you with step-by-step voice navigation. It also\n  finds you a new route if you get off the current route to discover new places -- you will never get lost again.\n  Furthermore, you can use the app to submit community reports to warn other cyclists and the authorities about\n  dangerous places. The competitive riders can use the app to compare themselves with their friends who is cycling\n  more through the {{ city }}.\n<\/p>","pages.about.parts.c":"<p>\n  Application {{ appName }} is developed for the {{ clientName }} by Umotional s.r.o.\n<\/p>","pages.about.parts.d":"<p>\n  Contact: <a href=\"mailto:{{ contactEmail }}\">{{ contactEmail }}<\/a>\n<\/p>","pages.about.parts.e":"<p>\n  As one of the data sources, {{ appName }} uses OpenStreetMap maps, a collaborative project to create a free\n  editable map of the world based on the Open Database License.\n<\/p>","pages.about.parts.f":"<p style=\"font-style: italic;\">\n  Routes have information purposes only. Due to road works, current traffic, weather, and other events the real\n  conditions on the route can differ from those suggested by the application. Use your judgment, be careful and follow\n  road signs and other warnings. It is completely your responsibility that you follow traffic rules and ride safe.\n<\/p>","pages.terms.title":"Terms of Service","pages.terms.parts.since":"<p><em>Valid from {{ validFrom }}.<\/em><\/p>","pages.terms.parts.a1":"<p>\n  The {{ appName }} websites, related mobile applications and services (collectively, the \u201cServices\u201d) are made available to you by Umotional s.r.o., B\u011blehradsk\u00e1 858\/23, 120 00 Praha 2, Czech Republic, subject to these Terms of Service (the \u201cTerms\u201d) and in accordance with the {{ appName }} Privacy Policy (the \u201cPrivacy Policy\u201d). More information about the Services may be found at urbancyclers.com. BY ACCESSING, USING OR UPLOADING OR DOWNLOADING ANY INFORMATION OR MATERIALS TO OR FROM THE SERVICES, OR BY INDICATING YOUR ASSENT TO THESE TERMS BY CREATING AN ACCOUNT, CLICKING \u201cSIGN IN\u201d OR ANY SIMILAR MECHANISM, YOU ARE AGREEING TO THESE TERMS. IF YOU DO NOT AGREE TO THE THESE TERMS, DO NOT ACCESS OR USE THE SERVICES.\n<\/p>","pages.terms.parts.b0":"<h2 class=\"h2\">Registration and Accounts<\/h2>","pages.terms.parts.b1":"<p>\n  The Services are intended solely for persons who are 15 years old or such higher age required in your country to use the Services. If you are under the legal age to form a binding contract in your jurisdiction, you represent that your parent or legal guardian has reviewed and agreed to these Terms on your behalf.\n<\/p>","pages.terms.parts.b2":"<p>\n  To use some of the Services, you must register. You agree to provide true, accurate, current and complete information about yourself (\u201cMember Data\u201d) and maintain and promptly update the Member Data. You agree that {{ appName }} may use your Member Data to provide Services that you access or use and as otherwise set forth in these Terms. If you provide any Member Data that is inaccurate or not current, or {{ appName }} has reasonable grounds to suspect that such Member Data is inaccurate or not current, {{ appName }} has the right to suspend or terminate your account and refuse current or future use of the Services. In consideration of your use of the Services, you represent that you are not a person barred from receiving services under the laws of any applicable jurisdiction.\n<\/p>","pages.terms.parts.b3":"<p>\n  You are solely responsible for maintaining the confidentiality of the password associated with your account and for restricting access to your password, your computer and mobile device while logged into the Services. You accept responsibility for all activities that occur under your account or from your computer and mobile devices. We endeavor to use reasonable security measures to protect against unauthorized access to your account. We cannot, however, guarantee absolute security of your account, your Content (as defined below) or the personal information you provide, and we cannot promise that our security measures will prevent third-party \u201chackers\u201d from illegally accessing the Services or its contents. You agree to immediately notify {{ appName }} of any unauthorized use of your account or password, or any other breach of security, and confirm that you understand all risks of unauthorized access to Member Data and any other information or content you provide to {{ appName }}.\n<\/p>","pages.terms.parts.b4":"<p>\n  You may register for or log-in to your account via a third-party network, such as Facebook or Google. If you do so, you hereby authorize {{ appName }} to pre-populate the registration and other relevant information fields of your account and\/or to use such third-party credentials to log you into your account. If you connect your account to a third-party network, you agree to comply with the terms and conditions and policies applicable to such third party.\n<\/p>","pages.terms.parts.c0":"<h2 class=\"h2\">Paid Services<\/h2>","pages.terms.parts.c1":"<p>\n  If you choose to subscribe to any of our enhanced, paid services, these are the payment and billing terms that apply. Paid subscription automatically renews unless auto-renew is turned off at least 24-hours before the end of the current period. You may cancel at any time.\n<\/p>","pages.terms.parts.c2":"<p>\n  The fees for the subscription needs to be paid through a third party (iTunes App store or Google Play) in accordance with their respective terms of use, privacy policy, and\/or any applicable payment terms and conditions. If you provide your payment information, you authorize respective third party service provider to receive, store and encrypt your payment information. In no event will Cyclers be responsible for the actions or inactions of any third party payment processor, including, but not limited to, system downtime or payment service outages.\n<\/p>","pages.terms.parts.c3":"<p>\n  To manage subscriptions created via Google Play please follow the steps in this guide from Google Play. To manage subscriptions created via iTunes App Store please follow the steps in this guide from Apple\n<\/p>","pages.terms.parts.c4":"<p>\n  Our fees are subject to different subscription plans, gift plans and promotions, and we therefore reserve the right to update our fees from time to time. You acknowledge that, if we change the fees, this will not affect your existing subscription fee, therefore, if you have signed up for a subscription at a certain fee, any fee changes will not affect any current subscription or any renewals.\n<\/p>","pages.terms.parts.d0":"<h2 class=\"h2\">Cancellation<\/h2>","pages.terms.parts.d1":"<p>\n  You may cancel your subscription at any time through the Google Play (guide) or iTunes App store (guide). The cancellation of the subscription will go into effect at the end of your current billing cycle. When your subscription ends, your account will remain and become a free membership. You can renew your subscription at any time without opening a new account, although the subscription fees may have increased. You can delete your account at any time.\n<\/p>","pages.terms.parts.db0":"<h2 class=\"h2\">Mobile Apps<\/h2>","pages.terms.parts.db1":"<p>\n  You should be aware that there are certain things that {{ appName }} will not take responsibility for. Certain functions of the app will require the app to have an active internet connection and GPS location. The connection can be Wi-Fi, or provided by your mobile network provider, but {{ appName }} cannot take responsibility for the app not working at full functionality if you don\u2019t have access to Wi-Fi, and you don\u2019t have any of your data allowance left.\n<\/p>","pages.terms.parts.db2":"<p>\n  If you\u2019re using the app outside of an area with Wi-Fi, you should remember that your terms of the agreement with your mobile network provider will still apply. As a result, you may be charged by your mobile provider for the cost of data for the duration of the connection while accessing the app, or other third party charges. In using the app, you\u2019re accepting responsibility for any such charges, including roaming data charges if you use the app outside of your home territory (i.e. region or country) without turning off data roaming. If you are not the bill payer for the device on which you\u2019re using the app, please be aware that we assume that you have received permission from the bill payer for using the app.\n<\/p>","pages.terms.parts.db3":"<p>\n  Along the same lines, {{ appName }} cannot always take responsibility for the way you use the app i.e. You need to make sure that your device stays charged \u2013 if it runs out of battery and you can\u2019t turn it on to avail the Service, {{ appName }} cannot accept responsibility.\n<\/p>","pages.terms.parts.db4":"<p>\n  It\u2019s your responsibility to keep your phone and access to the app secure. We therefore recommend that you do not jailbreak or root your phone, which is the process of removing software restrictions and limitations imposed by the official operating system of your device. It could make your phone vulnerable to malware\/viruses\/malicious programs, compromise your phone\u2019s security features and it could mean that the {{ appName }} app won\u2019t work properly or at all.\n<\/p>","pages.terms.parts.e0":"<h2 class=\"h2\">Accuracy<\/h2>","pages.terms.parts.e1":"<p>\n  Some of the Services are aimed at tracking your physical movements (\u201cActivity Tracking Services\u201d). These Activity Tracking Services rely on sensors and\/or GPS functionality that track your movement. The data and information provided by the Activity Tracking Services are intended to be a representation of your activity, but may not be completely accurate, including with respect to speed, distance, or calorie data. By using Activity Tracking Services, you acknowledge and agree that {{ appName }} is not responsible or liable for any inaccuracy in such data.\n<\/p>","pages.terms.parts.f0":"<h2 class=\"h2\">Copyright and Ownership<\/h2>","pages.terms.parts.f1":"<p>\n  {{ appName }} own the intellectual property rights to any and all protectable components of the Services, including but not limited to the name of the Services, artwork and end-user interface elements contained within the Services, and many of the individual features. You may not copy, modify, adapt, reproduce, distribute, reverse engineer, decompile, or disassemble any aspect of the Services. {{ appName }} claims no intellectual property rights over the Content you upload or provide to the Service.\n<\/p>","pages.terms.parts.g0":"<h2 class=\"h2\">User Generated Content<\/h2>","pages.terms.parts.g1":"<p>\n  The User agrees not to publish any content (mainly in the form of text, photos, video, graphics) on the {{ appName }} app that is unlawful, in particular racist, pornographic, offensive or defamatory or violates third party rights, in particular violates copyrights. Accordingly, the user is fully responsible for all content that they published and distributed with the {{ appName }} app.\n<\/p>","pages.terms.parts.g2":"<p>\n  In case a user is advised that the content uploaded to the {{ appName }} app by them may be violating law and\/or these terms of use, they shall immediately remove this content from the {{ appName }} app. In case Umotional obtains evidence that the user publishes any objectionable content that may be violating law and\/or these terms of use, Umotional is entitled to remove such objectionable content from the {{ appName }} app without notice to the affected and\/or to exclude (possibly) illegal behaving users from using the services of the {{ appName }} app.\n<\/p>","pages.terms.parts.g3":"<p>\n  The User understands that the User, and not Umotional, is entirely responsible for all content they upload, post, email, transmit or otherwise make available via the {{ appName }}. The User agrees that Umotional is not responsible for, and does not endorse, content posted in the {{ appName }}. Umotional does not guarantee the accuracy, integrity or quality of user generated content available in the {{ appName }}. The user understands that by using the {{ appName }}, they may be exposed to content that is offensive, indecent or objectionable. Under no circumstances will Umotional be liable in any way for any content, including, but not limited to, any errors or omissions in any content, or any loss or damage of any kind incurred as a result of the use of any content made available in the {{ appName }}. You agree to bear all risks associated with the use of any content available in connection with the {{ appName }}, including any reliance on the accuracy, completeness, or usefulness of such content.\n<\/p>","pages.terms.parts.h0":"<h2 class=\"h2\">Careful selection of a route by the User<\/h2>","pages.terms.parts.h1":"<p>\n  The User is aware that they have to make a careful decision in terms of their personal skills and equipment as well as the prevailing weather and traffic conditions whether, and if so, which routes provided by the {{ appName }} they select from for their activities. Accordingly Umotional takes no responsibility or liability for that:\n<\/p>","pages.terms.parts.h2":"<ol>\n  <li>the User has a sufficient (physical) capability to ride the route selected by them;<\/li>\n  <li>the User equipment is suitable for the commission or the riding of their chosen route;<\/li>\n  <li>weather and traffic conditions are suitable to commit or to ride the route selected by the User without a significant risk exposure for the life, body and health of the user.<\/li>\n<\/ol>","pages.terms.parts.i0":"<h2 class=\"h2\">Third Parties<\/h2>","pages.terms.parts.i1":"<p>\n  Third party products and services made available on the Services are made and offered directly by the applicable third party. When you pursue or purchase any such product or service, you acknowledge that you are contracting directly with such third party and not with {{ appName }}. Your interaction with, or participation in promotions of, third parties found on or through the Services, including payment and delivery of goods or services, and any other terms, are solely between you and such third party. You are not obligated to use or transact business with any third party that appears on the Services. YOU AGREE THAT CYCLERS SHALL NOT BE LIABLE FOR ANY LOSS OR DAMAGES OF ANY KIND INCURRED BY YOU AS THE RESULT OF ANY OF YOUR DEALINGS WITH THIRD PARTY SERVICE PROVIDERS OR ADVERTISERS AVAILABLE THROUGH THE SERVICES.\n<\/p>","pages.terms.parts.i2":"<p>\n  As one of the data sources, {{ appName }} uses OpenStreetMap maps, a collaborative project to create a free editable map of the world based on the Open Database License. Suggested routes have information purposes only. Due to road works, current traffic, weather, and other events the real conditions on the route can differ from those suggested by the application. Use your judgment, be careful and follow road signs and other warnings. It is completely your responsibility that you follow traffic rules and ride safe.\n<\/p>","pages.terms.parts.i3":"<p>\n  {{ appName }} or third parties may provide links to other internet sites or resources through the Services. {{ appName }} does not endorse and is not responsible or liable for any content, information, advertising, products or other materials on or available from such sites or resources. You acknowledge and agree that {{ appName }} is not responsible for the availability of such external sites or resources.\n<\/p>","pages.terms.parts.j0":"<h2 class=\"h2\">Disclaimer<\/h2>","pages.terms.parts.j1":"<p>\n  The materials within {{ appName }} are provided on an 'as is' basis. {{ appName }} makes no warranties, expressed or implied, and hereby disclaims and negates all other warranties including, without limitation, implied warranties or conditions of merchantability, fitness for a particular purpose, or non-infringement of intellectual property or other violation of rights. Further, {{ appName }} does not warrant or make any representations concerning the accuracy, likely results, or reliability of the use of the Services.\n<\/p>","pages.terms.parts.k0":"<h2 class=\"h2\">Limitations<\/h2>","pages.terms.parts.k1":"<p>\n  In no event shall {{ appName }} be liable for any damages (including, without limitation, damages for loss of data or profit, or due to business interruption) arising out of the use or inability to use the Services, even if Umotional, s.r.o. or a Umotional, s.r.o. authorized representative has been notified orally or in writing of the possibility of such damage. {{ appName }} accepts no liability for any loss, direct or indirect, you experience as a result of relying wholly on the functionality of the Services. Because some jurisdictions do not allow limitations on implied warranties, or limitations of liability for consequential or incidental damages, these limitations may not apply to you.\n<\/p>","pages.terms.parts.l0":"<h2 class=\"h2\">Updates of the Services<\/h2>","pages.terms.parts.l1":"<p>\n  {{ appName }} and its third party service providers may make improvements and\/or changes in the Services, products, services, mobile applications, features, programs, and prices described at any time and for any reason in its sole discretion. {{ appName }} reserves the right at any time to modify or discontinue, temporarily or permanently, the Services or any portion thereof with or without notice. You agree that {{ appName }} shall not be liable to you or to any third party for any modification, suspension or discontinuance of the Services.\n<\/p>","pages.terms.parts.l2":"<p>\n  The mobile application may download and install upgrades, updates and additional features in order to improve, enhance, and further develop the Services. The app is currently available on Android & iOS \u2013 the requirements for both systems (and for any additional systems we decide to extend the availability of the app to) may change, and you\u2019ll need to download the updates if you want to keep using the app. {{ appName }} do not promise that they will always update the app so that it is relevant to you and\/or works with the Android & iOS version that you have installed on your device. However, you promise to always accept updates to the application when offered to you, We may also wish to stop providing the app, and may terminate use of it at any time without giving notice of termination to you.\n<\/p>","pages.terms.parts.m0":"<h2 class=\"h2\">Modification of the Terms<\/h2>","pages.terms.parts.m1":"<p>\n  We will update the Terms when necessary to reflect changes in {{ appName }}. When we post changes to the Terms, we will revise the \"last updated\" date at the top of the Terms. If there are material changes to the Terms, we will notify you either by prominently posting a notice of such changes before they take effect or by directly sending you a notification. By continuing to access or use the Services after we have provided you with notice of a modification, you are agreeing to be bound by the modified Terms. If the modified Terms are not acceptable to you, your only recourse is to cease using the Services.\n<\/p>","pages.terms.parts.n0":"<h2 class=\"h2\">Governing Law<\/h2>","pages.terms.parts.n1":"<p>\n  These terms and conditions are governed by and construed in accordance with the laws of the Czech Republic and you irrevocably submit to the exclusive jurisdiction of the courts in that location.\n<\/p>","pages.terms.parts.o0":"<h2 class=\"h2\">Support and Questions<\/h2>","pages.terms.parts.o1":"<p>\n  If you have a question or a concern regarding these Terms or the Services, please contact us by using email {{ contactEmail }}. We will respond within 30 days.\n<\/p>","cookies.consent_modal.title":"We use cookies","cookies.consent_modal.description":"Hello, this website uses essential cookies to ensure its proper operation and tracking cookies to understand how you interact with it. The latter will be set only after consent. <button type=\"button\" data-cc=\"c-settings\" class=\"cc-link\">Let me choose<\/button>","cookies.consent_modal.primary_btn":"Accept all","cookies.consent_modal.secondary_btn":"Reject all","cookies.settings_modal.title":"Cookie preferences","cookies.settings_modal.save_settings_btn":"Save settings","cookies.settings_modal.accept_all_btn":"Accept all","cookies.settings_modal.reject_all_btn":"Reject all","cookies.settings_modal.close_btn_label":"Close","cookies.settings_modal.cookie_table_headers.col1":"Name","cookies.settings_modal.cookie_table_headers.col2":"Domain","cookies.settings_modal.cookie_table_headers.col3":"Expiration","cookies.settings_modal.cookie_table_headers.col4":"Description","cookies.settings_modal.blocks.0.title":"Cookie usage \ud83d\udce2","cookies.settings_modal.blocks.0.description":"We use cookies to ensure the basic functionalities of the website and to enhance your online experience. You can choose for each category to opt-in\/out whenever you want. For more details relative to cookies and other sensitive data, please read the full <a target=\"_blank\" href=\"{{ wwwroot }}\/privacy\/\" class=\"cc-link\">privacy policy<\/a>.","cookies.settings_modal.blocks.1.title":"Strictly necessary cookies","cookies.settings_modal.blocks.1.description":"These cookies are essential for the proper functioning of my website. Without these cookies, the website would not work properly.","cookies.settings_modal.blocks.2.title":"Performance and Analytics cookies","cookies.settings_modal.blocks.2.description":"These cookies allow the website to remember the choices you have made in the past.","cookies.settings_modal.blocks.2.cookie_table.0.col3":"2 years","cookies.settings_modal.blocks.2.cookie_table.1.col3":"1 day","cookies.settings_modal.blocks.3.title":"Advertisement and Targeting cookies","cookies.settings_modal.blocks.3.description":"These cookies collect information about how you use the website, which pages you visited and which links you clicked on. All of the data is anonymized and cannot be used to identify you.","cookies.settings_modal.blocks.4.title":"More information","cookies.settings_modal.blocks.4.description":"For any queries in relation to our policy on cookies and your choices, please <a target=\"_blank\" class=\"cc-link\" href=\"{{ wwwroot }}\/terms\">contact us<\/a>.","share_title":"Na kole Prahou | Planner","menu.tips":"Cycling tips","menu.about":"About","menu.other":"Other projects","menu.contribute":"Contribute"},"cities":[{"name":"Praha","slug":"prague","img":"http:\/\/urbancyclers.com\/img\/cities\/prague.jpg","lat":50.08562,"lng":14.41183,"zoom":13}],"defaultCity":{"name":"Praha","slug":"prague","img":"http:\/\/urbancyclers.com\/img\/cities\/prague.jpg","lat":50.08562,"lng":14.41183,"zoom":13},"web":{"debug_email":"tracy@urbancyclers.com","contact_email":"info@nakoleprahou.cz","url":"https:\/\/nakoleprahou.cz","homepage":"https:\/\/nakoleprahou.cz","gpx_base":"https:\/\/nakoleprahou.cz","qr_base":"https:\/\/nakoleprahou.cz\/plan"},"identifiers":{"flavour":"ucpraha","googleplay":"com.umotional.ucpraha","appstore":1213867293,"ga":"GA-DUMMY","appleSiteAssociation":{"applinks":{"apps":[],"details":[{"appID":"SY5678U929.com.umotional.ucpraha","paths":["*","\/"],"components":[{"\/":"\/plan\/*","#":"responseId*"},{"\/":"\/","#":"responseId*"},{"\/":"\/","#":""}]}]}},"googleLinks":[{"relation":["delegate_permission\/common.handle_all_urls"],"target":{"namespace":"android_app","package_name":"com.umotional.ucpraha","Sha256_cert_fingerprints":["4B:E8:A0:16:BE:1D:6A:1C:83:78:52:10:A8:2F:A3:C2:65:AB:2B:CC:EA:69:E6:FC:25:10:B1:C9:A1:67:E1:C1"]}}]},"strings":{"name":"Na kole Prahou","city":"city of Prague","client":"city of Prague"},"components":{"userLocator":true,"markerLocator":true,"waypoints":true,"routeType":true,"desiredLength":true,"pois":false,"trips":true,"bikeSelector":true,"bikeSharing":true,"minimizePanels":true,"isochrones":true,"isochronesAutoinit":true,"legend":true,"rideImport":true,"rideContribute":true,"preferences":{"traffic":true,"surface":true,"hills":true,"stairs":true,"pavements":true,"oneWays":true,"air":false,"climbBool":false,"trafficBool":false,"dateTime":false,"surface_lvl05":false},"views":{"panel":true,"transparent":true,"traffic":true,"surface":true,"steepness":true},"welcomeMessage":false,"geolocationMessage":false,"tooltips":true,"cookies":true,"walker":true,"debugger":false,"experimental":false,"localPlanStorage":true,"showBikeSelectorOnFirstVisit":true,"magnifier":true,"draggableRoutes":true,"inject":["<modal-other-projects \/>"]},"defaults":{"units":"metric","vehicle":"CITY_BIKE","route":{"a":null,"b":null}},"branding":{"colors":{"primary":"#0097ad","primary.light":"#0097ad","primary.dark":"#0097ad","primary.hover.light":"#0cc0da","primary.hover.dark":"#000","primary.bg.light":"#4EAAC2","secondary":"transparent","secondary.light":"transparent","secondary.dark":"transparent","dark":"transparent","light":"transparent","alt1":"#0097ad","alt2":"#37bcd0","alt3":"rgb(245, 254, 255)","alt4":"#0097ad","alt5":"#295196","import.alt":"#007384","surface.excellent":"#909090","surface.good":"#BCBCBC","surface.intermediate":"#FFDB7F","surface.bad":"#AC8400","surface.horrible":"#EE0000","plan":{"gradient":["rgba(0, 180, 206, .25)","rgba(0, 180, 206, .01)"],"border":"#0097ad","point.bg":"#0097ad","point.border":"#0097ad"}},"images":{"logo":"\/custom\/img\/web_logo.png","favicon":"\/custom\/img\/favicon\/favicon-196x196.png","share_image":"\/custom\/img\/og-prague.png","markers":{"a":"\/custom\/img\/resources\/marker_a.svg","b":"\/custom\/img\/resources\/marker_b.svg","wp":"\/custom\/img\/resources\/marker_wp.svg","poi":"\/custom\/img\/resources\/marker_poi.svg"},"icons":{"checked":"\/custom\/img\/resources\/checked.svg"},"views":{"map":"\/custom\/img\/map--green.svg","transparent":"\/custom\/img\/view--green.svg","traffic":"\/custom\/img\/traffic--green.svg","surface":"\/custom\/img\/road--green.svg","steepness":"\/custom\/img\/mountain--green.svg"}},"styles":".item-docs a img { height: 40px; }\n.item-docs a span { color: rgb(119, 119, 119); font-weight: normal; }\n.item-docs:nth-child(5) a { padding: 13px 10px 0 10px !important; }\n.item-docs:nth-child(6) a { padding: 13px 10px 0 10px !important; }\n.navbar-brand { padding-top: 15px; }\n.colorizable.checked img.ico { filter: hue-rotate(62deg) saturate(1.3); }"},"pages":{"privacy":{"validFrom":"2020-09-16","composition":["since","a1","b0","b1","c0","c1","d0","d1","d2","d3","d4","d5","d6","e0","e1","f0","f1","f2","f3","g0","g1","g2","g3","g4","g5","g6","g7","h0","h1","h2","h3","h4","h5","h6","h7","h8","i0","i1","i2","i3","j0","j1","k0","k1","l0","l1"]},"terms":{"validFrom":"2020-09-16","composition":["since","a1","b0","b1","b2","b3","b4","db0","db1","db2","db3","db4","e0","e1","f0","f1","g0","g1","g2","g3","h0","h1","h2","i0","i1","i2","i3","j0","j1","k0","k1","l0","l1","l2","m0","m1","n0","n1","o0","o1"]},"ride":{"facebook_url":null,"twitter_url":null,"instagram_url":null},"about":{"composition":["a","b","c","d","e","f"]},"menu":{"left":"Na kole","right":"Prahou"},"links":{"first":null,"second":{"title":"Pl\u00e1nova\u010d","href":"\/"},"third":{"title":"Aplikace","href":"https:\/\/play.google.com\/store\/apps\/details?id=com.umotional.ucpraha&hl=cs"}},"assets":{"js":["https:\/\/api.mapbox.com\/mapbox-gl-js\/v1.11.0\/mapbox-gl.js","https:\/\/cdn.jsdelivr.net\/npm\/chart.js@2.8.0\/dist\/Chart.min.js","\/v2.5\/3rd\/js\/app.js"],"css":["https:\/\/api.mapbox.com\/mapbox-gl-js\/v1.11.0\/mapbox-gl.css","https:\/\/fonts.googleapis.com\/css?family=Prompt:300,400,500,600,700&display=swap&subset=latin-ext","\/v2.5\/3rd\/css\/bootstrap.pn.min.css","\/v2.5\/3rd\/css\/bootstrap-theme.pn.min.css","\/v2.5\/3rd\/css\/fonts.css","\/v2.5\/3rd\/css\/ride-invitation.css","\/custom\/css\/3rd.css"]}},"menu":{"logo":{"show":true},"left":{"homepage":{"show":false,"label":null,"link":null},"back":{"show":false,"label":null,"link":"\/"},"items":[{"label":"Pl\u00e1nova\u010d","link":"\/"},{"label":"Cyklistick\u00e9 tipy","link":"\/tips.php?lang=cs"},{"label":"O projektu","link":"\/about.php?lang=cs"},{"label":"Dal\u0161\u00ed projekty","link":"","onclick":"window.dataStorage.data.modalOtherProjects.open();"},{"label":"P\u0159isp\u011bt j\u00edzdu","link":"\/contribute\/cs\/"}]},"right":{"me":{"show":false,"label":null},"items":[{"label":"cs","link":"\/cs\/"},{"label":"en","link":"\/en\/"},{"label":"<i aria-hidden=\"true\" class=\"fa fa-apple\"><\/i>","link":"https:\/\/apps.apple.com\/cz\/app\/cyclers-bike-map-navigation\/id1213867293"},{"label":"<i aria-hidden=\"true\" class=\"fa fa-android\"><\/i>","link":"https:\/\/play.google.com\/store\/apps\/details?id=com.umotional.ucpraha&hl=cs"},{"label":"<img src=\"\/custom\/img\/csp_logo.svg\" alt=\"CSP logo\">","link":"http:\/\/www.cistoustopou.cz\/"},{"label":"<img src=\"\/custom\/img\/praha_logo.svg\" alt=\"Praha logo\">","link":"http:\/\/www.praha.eu\/"}],"highlighted":{"show":false,"label":null,"link":null}}},"firebase":{"key":"AIzaSyBmEccXJJUQ2O5RX39ft9_ngyGn1LuPbLE","domain":"na-kole-prahou.firebaseapp.com","db":"https:\/\/na-kole-prahou.firebaseio.com","bucket":"na-kole-prahou.appspot.com"},"build":"202305230706"};;
/* window.language: */

window.language = {"app_name":"Na kole Prahou","meta_description":"Na Kole Prahou is the world\u2019s most advanced navigation engine for cycling and micromobility inside a city.","meta_author":"Umotional","generic_title":"Na kole Prahou | Planner","twitter_share_author":"@umotional","toggle_nav":"Toggle navigation","menu.blog":"Blog","rider.head":"Rider","rider.claim":"Urban cycling made simpler and fun","rider.smart.head":"Bike Smarter","rider.smart.claim":"Get personalized expert advice on how best to ride the bike around your city","rider.smart.l1":"Explore your city with the comprehensive <strong>urban cycling maps<\/strong>.","rider.smart.l2":"<strong>Search<\/strong> for the best <strong>cycling routes<\/strong> based on a range of criteria, including safety, comfort and speed.","rider.smart.l3":"Be guided to your destination by a <strong>turn-by-turn navigation<\/strong> optimized for urban use.","rider.smart.l4":"Get <strong>real-time weather<\/strong> and <strong>pollution<\/strong> updates*.","rider.smart.l5":"Don\u2019t have a bike? No problem - plan your trip with a <strong>shared bike<\/strong>.","rider.smart.intermodal":"<strong>Go Intermodal<\/strong>: Combine bike with train, metro or bus to extend your range or dodge unfriendly parts of the city.","rider.smart.electric":"<strong>Go Electric<\/strong>: Find the best electric bike routes with a dedicated <strong>e-bike routing<\/strong> profiles.","rider.ai":"UrbanCyclers are powered by a world-leading cycling artificial intelligence.","rider.more.head":"Bike More","rider.more.claim":"Be motivated by a unique system of rewards. Make cycling your habit","rider.more.l1":"<strong>Track<\/strong> your rides to get <strong>insights<\/strong> into where and how you cycle.","rider.more.l2":"Unlock Explorer, Commuter, Night Rider and a number of other unique <strong>urban cycling badges<\/strong>.","rider.more.l4":"Participate in global and local urban <strong>cycling competitions<\/strong>.","rider.more.dpnk":"Connect with competition <a href=&quot;https:\/\/www.dopracenakole.cz&quot; target=&quot;_blank&quot;><strong>Do pr\u00e1ce na kole 2017<\/strong><img src=&quot;img\/logos\/dpnk_logo.png&quot; style=&quot;display: inline-block; height: 30px ; margin-left: 5px ; &quot;><\/a> and upload your rides with one click.","rider.more.l3":"<strong>Win<\/strong> valuable <strong>real prizes<\/strong> for your cycling achievements. You can win <a href=&quot;https:\/\/www.cyklospeciality.cz\/brompton\/&quot; target=&quot;_blank&quot;><img src=&quot;img\/logos\/brompton_male.png&quot; style=&quot;display: inline-block; height: 30px ; margin-left: 5px ; &quot;><\/strong><\/a> folding bike!","rider.together.head":"Bike United","rider.together.claim":"Unleash the power of the urban cycling community","rider.together.l1":"Motivate and be motivated by <strong>sharing<\/strong> your cycling achievements with the UrbanCyclers community.","rider.together.l2":"<strong>Inform<\/strong> fellow riders about cycling issues and hazards on routes you know.","rider.together.l3":"<strong>Record your rides<\/strong> to make the app smarter and facilitate your city\u2019s <strong>transport planning<\/strong>.","rider.together.l4":"Leverage the power of the <strong>cycling community<\/strong> to get the authorities to do more for cyclists.","rider.cities":"Cities use your data to improve infrastructure!","rider.testimonials.t1.text":"Nice app, routes in Prague are pretty accurate. Also, not draining battery much.","rider.testimonials.t1.name":"Vl Za","rider.testimonials.t2.text":"Useful for bikers Route selection works well, rerouting also. Essential for bikers","rider.testimonials.t2.name":"Lo Ki","rider.testimonials.t3.text":"Great application - helped me to find an interesting yet easy route I didn&quot;t know before!","rider.testimonials.t3.name":"Stepan Kopriva","rider.cfa.head":"Lets ride!","rider.cfa.claim":"Just take your bike and let UrbanCyclers guide you! It is fun!","rider.coverage.head":"Coverage","rider.coverage.claim":"UrbanCyclers are now available in 7 areas across the world","rider.coverage.prague":"Prague","rider.coverage.czechrepublic":"Czech Republic","rider.coverage.sf":"San Francisco & The Bay Area","rider.coverage.california":"California","rider.coverage.berlin":"Berlin","rider.coverage.germany":"Germany","rider.coverage.bratislava":"Bratislava","rider.coverage.slovakia":"Slovakia","rider.coverage.london":"London","rider.coverage.uk":"Great Britain","rider.coverage.milano":"Milan","rider.coverage.italy":"Italy","rider.coverage.bogota":"Bogota","rider.coverage.colombia":"Colombia","rider.coverage.santiago":"Santiago de Chile","rider.coverage.chile":"Chile","rider.mounting.head":"Afraid of mounting your phone ? Don&quot;t be!","rider.mounting.text":"Mounting your phone to the handlebars is easier than you think. The handlebars also protect your phone. After majority of the bike accidents, the bike falls to a side. Follow UrbanCyclers! We give out the rubber holders to our users often for free.","cities.cities":"Cities","cities.menu":"City","cities.head":"UrbanCyclers Suite","cities.claim":"Smart cycling conversion made for cities.","cities.button":"Analyze &middot; Empower &middot; Promote","cities.analyze.head":"Analyze","cities.analyze.claim":"Get deep data-driven insights into cycling in your city","cities.analyze.p":"Use different type of <strong>data analytics<\/strong> (travel time analysis, weak link identification, etc.) for making <strong>smart decisions<\/strong> when investing in cycling infrastructure. <strong>Validate proposed solutions<\/strong> in what-if analytics.","cities.empower.head":"Empower","cities.empower.claim":"Make it easier for your citizens to get out on the bike","cities.empower.p":"Give your citizens <strong>relevant and timely information<\/strong> they need to get around the city on bike <strong>safe and efficient<\/strong>. Help to spread the information created by your city&quot;s <strong>cycling community<\/strong> among other riders.","cities.promote.head":"Promote","cities.promote.claim":"Make more people want to ride","cities.promote.p":"<strong>Engage citizens<\/strong> through urban cycling <strong>games and competitions<\/strong>. With UrbanCyclers you can organize <strong>own campaigns<\/strong>, manage participant and award real prizes to the best.","cities.cyclemore.head":"Make your city cycle more!","cities.cyclemore.claim":"Do you want UrbanCyclers to work in your city? Do you want to increase modal share of cycling?","cities.cyclemore.mailbutton":"Let us know","cities.cyclemore.factsheetbutton":"Download factsheet","cities.technology.head":"Technology","cities.technology.claim":"Software provided as a service with no extra costs","cities.technology.l1":"<strong>Mobile app<\/strong>, <strong>web app<\/strong> and <strong>analytics tools<\/strong> working seamlessly together.","cities.technology.l2":"Provided as a Software as a Service -- <strong>no extra<\/strong> IT infrastructure, maintenance or upgrade <strong>costs<\/strong>.","cities.technology.l3":"Can be delivered as <strong>white box solution<\/strong> with your <strong>city\u2019s branding<\/strong>.","cities.technology.l4":"Can be extended and integrated with other apps and services through <strong>open APIs<\/strong>.","cities.clients.head":"Clients","cities.clients.claim":"Full range of products - from basic analytics to whitelabeling of the whole solution - has found its custommers.","cities.clients.prg":"City of Prague","cities.clients.ipr":"IPR Prague","cities.clients.cdv":"Transportation Research Centre","b2b.b2b":"B2B","b2b.menu":"B2B","b2b.head":"Smart B2B Platform","b2b.claim":"Leverage the power of UrbanCyclers platform for your business","b2b.advert.head":"In-App Advertising","b2b.advert.claim":"Use UrbanCyclers as direct advertising channel to cyclists in each city.","b2b.communication.head":"Communication with users","b2b.communication.claim":"Use UrbanCyclers as direct communication channel to cyclists in each city. Propagate cycling related actions or just a major road closure.","b2b.content.head":"Sponsored Game Content","b2b.content.claim":"Are you a representative of cycling brand? Let your brand propagate in gamification part of UrbanCyclers. You will be respected for giving people gifts for cycling!","b2b.competitions.head":"Hosted Cycling Competition","b2b.competitions.claim":"Are you organizing distributed cycling competition, i.e. Bike2Work campaign? Let us ease your workflow with UrbanCyclers.","b2b.analytics.head":"Cycling data analytics","b2b.analytics.claim":"We can answer any question you might have about cycling in your city. Our behavioral engine is the key.","b2b.engine.head":"Most advanced cycling routing","b2b.engine.claim":"Do you want to cover your area with the best cycling routing in the world? Just let us know.","b2b.whitelabel.head":"Whitelabeled solution","b2b.whitelabel.claim":"Do you like UrbanCyclers and you would love to have similar app with your brand? We whitelabel the whole platform our just specific parts of the app.","b2b.payperride.head":"Cycling incentivization","b2b.payperride.claim":"Do you want to pay people for riding a bike? For insurance companies, large employers or even small ones. Motivate the people with cash! Our AI will help you!","b2b.byapp":"All the platform products are delivered to the audience thanks to the best rated cycling app!","b2b.try.head":"Unlock the value of cycling","b2b.try.claim":"Let us know which product are you interested in and we will give you all the information you may need","locale":"en_US","menu.planner":"Route planner","menu.profile":"Profile","menu.tracks":"Rides","menu.leaderboards":"Leaderboards","menu.badges":"Badges","menu.login":"Login","planner.og.title":"UrbanCyclers Plan: Find your cycling route!","planner.og.description":"New bicycle route planner specialized on urban cycling. Helps you discover new interesting routes. The route planner also recommends how to combine bike with public transport.","planner.origin":"Origin","planner.mid":"Add waypoint","planner.too_much_waypoints":"Too much waypoints, maximum number of waypoints is |XXX0|","planner.destination":"Destination","planner.planpanels.bf.label":"Bike-friendly","planner.planpanels.wf.label":"Walk-friendly","planner.planpanels.bf.tooltip":"A bike-friendly route prioritizing the use of cycle paths, cycle lanes and residential streets over the overall ride time","planner.planpanels.fast.label":"Fast","planner.planpanels.fast.tooltip":"A fast route prioritizing the ride time","planner.planpanels.bpt.label":"Bike on PT","planner.planpanels.bpt.tooltip":"An intermodal route combining cycling with the use of public transport","planner.planpanels.bs.label":"Alternative","planner.planpanels.bs.tooltip":"Trasa vyu\u017e\u00edvaj\u00edc\u00ed bikesharingov\u00fdch kol Rekola.cz","planner.planpanels.a.label":"Alternative","planner.planpanels.a.tooltip":"Alternative route(s) offering different trade-offs between route bike-friendliness and ride time","planner.planpanels.title":"plan","planner.planpanels.elevationGain":"el. gain","planner.planpanels.energy":"energy","planner.planpanels.saves":"saves","planner.planpanels.cycleways.tooltip":"Bike-friendly route segments","planner.planpanels.walkfriendly.tooltip":"Walk-friendly route segments","planner.planpanels.traffic.tooltip":"Percentage of routes with high traffic","planner.planpanels.surface.tooltip":"Percentage of Badly Paved or unpaved routes","planner.planpanels.steepness.tooltip":"Percentage of steep segments with slope greater than 6%","planner.planpanels.exportMobile":"Export to mobile","planner.planpanels.ratePlan":"Rate the route","planner.planpanels.downloadGpx":"Download GPX","planner.legend.less_trafic":"Less traffic","planner.legend.heavy_traffic":"Heavy traffic","planner.legend.unpopular":"Unpopular","planner.legend.popular":"Popular","planner.legend.smoothness":"Smoothness","planner.legend.paved_exl":"Asphalt","planner.legend.paved":"Paved","planner.legend.compacted":"Compacted","planner.legend.unpaved":"Unpaved","planner.legend.bad":"Bad","planner.legend.very_bad":"Very bad","planner.legend.unknown":"Unknown","planner.legend.flat":"Flat","planner.legend.steep":"Steep","planner.legend.PAVED_EXCELLENT":"Asphalt","planner.legend.PAVED_GOOD":"Paved","planner.legend.PAVED_INTERMEDIATE":"Paved","planner.legend.PAVED_BAD":"Badly Paved","planner.legend.PAVED_HORRIBLE":"Horrible","planner.legend.PAVED_IMPASSABLE":"Impassable","planner.legend.UNPAVED_EXCELLENT":"Asphalt","planner.legend.UNPAVED_GOOD":"Badly Paved","planner.legend.UNPAVED_INTERMEDIATE":"Smooth Unpaved","planner.legend.UNPAVED_BAD":"Unpaved","planner.legend.UNPAVED_HORRIBLE":"Bumpy Unpaved","planner.legend.UNPAVED_IMPASSABLE":"Impassable","planner.warnings.steps":"Steps","planner.warnings.steep_uphill":"Steep uphill","planner.warnings.bad_surface":"Bad surface","planner.warnings.high_stress":"High stress","planner.warnings.warning":"Warning","planner.warnings.footway":"Footway","planner.warnings.crossing":"Crossing","planner.warnings.no_entry":"One way street","planner.exception.location_not_found":"At least one location is out of the supported area <br \/><br \/>\nDo you want to test Cyclers in another region? \nContact us at <a href=\"mailto:info@umotional.com\">info@umotional.com<\/a> and we will unlock it for you!","planner.exception.plan_not_found":"No plan has been found for given points","planner.exception.max_waypoints_exceeded":"Maximum number of waypoints has been exceeded","planner.exception.invalid_request":"Provided request has been invalid","planner.exception.server_error":"Internal server error","planner.exception.download_error":"Error while downloading response","transport.error":"No plan has been found for given points","planner.errors.GENERIC":"Sorry, route planner is unavailable. Try again later.","planner.errors.LOCATION_NOT_FOUND":"The locations are outside of the supported countries, or not in the same country.","planner.errors.MAX_WAYPOINTS_EXCEEDED":"Too many waypoints were entered in the request.","planner.errors.PLAN_NOT_FOUND":"No route found. Change the route preferences or try different locations.","planner.errors.ROUTE_NOT_FOUND":"No route found. Change the route preferences or try different locations.","planner.errors.INVALID_REQUEST":"Your request was considered as invalid. Please contact our support.","planner.errors.LIMIT_EXCEEDS":"The application sent too many requests on your behalf. Try again later.","planner.errors.SERVER_ERROR":"Route planner didn\u2019t respond due to an error. Try again later.","planner.errors.TIMEOUT":"Route planner is taking too long to respond. Check your connection or try again later.","planner.errors.NOT_AUTHORIZED":"Your request was considered as unauthorized. Please contact our support.","planner.legend.cycleway":"Cycleway","planner.legend.cyclelane":"Cycle lane","planner.legend.softlane":"Soft lane","planner.selectCity.header":"Select the city","planner.selectCity.callForSelect":"Ride the city!","planner.cities.prague":"Prague","planner.cities.berlin":"Berlin (beta)","planner.cities.bratislava":"Bratislava (beta)","planner.cities.barcelona":"Barcelona (beta)","planner.cities.milan":"Milan (beta)","planner.cities.sanfrancisco":"San Francisco (beta)","planner.cities.madrid":"Madrid (beta)","planner.cities.london":"London (beta)","planner.cities.czech":"Czech Republic (beta)","planner.cities.santiago":"Santiago de Chile (beta)","planner.cities.bogota":"Bogota (beta)","planner.common.close":"Close","planner.common.more":"More","planner.common.thanks":"Thanks!","planner.common.send":"Send","planner.pt.rail":"Train","planner.pt.tram":"Tram","planner.pt.metro":"Subway","planner.pt.underground":"Subway","planner.pt.each":"fq.","planner.pt.station":"Station","planner.ttf.crowd":"Crowd","planner.ttf.pothole":"Pothole","planner.ttf.bike_stand":"Bike stand","planner.ttf.road_closure":"Road closure","planner.ttf.traffic_jam":"Traffic jam","planner.ttf.danger":"Danger","planner.ttf.loading":"Loading...","planner.base.dark":"Dark skin","planner.base.light":"Light skin","planner.overlays.tt":"Reported by community","planner.overlays.pt":"Public transport","planner.bikes.city_bike":"City bike","planner.bikes.electric_bike":"E-bike","planner.bikes.road_bike":"Road bike","planner.bikes.hybrid_bike":"Hybrid bike","planner.bikes.mountain_bike":"Mountain bike","planner.bikes.folding_bike":"Folding bike","planner.bikes.cargo_bike":"Cargo bike","planner.bikes.fixie_bike":"Fixie bike","planner.bikes.other_bike":"Other bike","planner.avoid.climbs":"Avoid steep climbs","planner.avoid.traffic":"Avoid busy streets","planner.avoid.stairs":"Avoid stairs","planner.avoid.pavements":"Avoid pavements","planner.avoid.oneway":"Avoid one-ways","planner.recompute":"Search","planner.just_a_sec":"Jus a sec","planner.pois.add":"P\u0159idat do pl\u00e1nu","planner.pois.destination":"Set as destination","planner.pois.warnings":"Route warnings","planner.spinner.text":"Finding the best routes for you \u2013 hold on please!","profile.settings.loggedAs":"You are logged using Google account","profile.settings.callForNickname":"Seems like you have not set up your nickname yet, let&quot;s do it!","profile.settings.pp":"See our privacy policy","profile.settings.header":"Settings","profile.settings.save":"Save settings","profile.settings.nickname":"Nickname","profile.settings.nickname.placeholder":"John the Biker","profile.settings.language":"Language","profile.settings.unitSystem":"Unit system","profile.settings.unitSystem.metric":"Metric","profile.settings.unitSystem.imperial":"Imperial","planner.rating.head":"Route evaluation","planner.rating.howLike":"How do you like the route?","planner.rating.markIssues":"Mark issues with the route","planner.rating.forbidMan.head":"Forbidden maneuvers","planner.rating.forbidMan.sample":"e.g. turn right when prohibited by traffic signs","planner.rating.notprofile.head":"Not maching the route type","planner.rating.notprofile.sample":"e.g. bike-friendly route is not quiet\/safe enough","planner.rating.danger.head":"Dangerous place","planner.rating.danger.sample":"the route goes through a dangerous place","planner.rating.pavement.head":"The use of pavement","planner.rating.pavement.sample":"the route goes on the pavement even if not necessary","planner.rating.wrongmap.head":"Wrong map","planner.rating.wrongmap.sample":"the underlying map does not correspond to reality","planner.rating.otherissues":"Other issues (optional)","planner.loginmodal.login":"Login","planner.loginmodal.disclaimer":"We will only use the e-mail, name, and profile photo from your Google account. We will not share this information with other UrbanCyclers users. We will not have access to any other information from your account.","planner.modeSelect.modal.header":"Choose your bike","planner.modeSelect.modal.header_alt":"Welcome to {{ appName }}! Let's pick your vehicle","planner.modeSelect.pick":"Change","planner.modeSelect.bicycle":"Bicycle","planner.modeSelect.other":"Other","planner.modeSelect.scooter":"Scooter","planner.modeSelect.walk":"Walk","planner.modeSelect.electric":"Electric","planner.modeSelect.type":"Vehicle type","planner.modeSelect.CITY_BIKE":"City","planner.modeSelect.ROAD_BIKE":"Road","planner.modeSelect.HYBRID_BIKE":"Trek","planner.modeSelect.MOUNTAIN_BIKE":"Mountain","planner.modeSelect.FOLDING_BIKE":"Folding","planner.modeSelect.CARGO_BIKE":"Cargo","planner.modeSelect.FIXIE_BIKE":"Fixie","planner.modeSelect.OTHER_BIKE":"Other","planner.modeSelect.BIG_SCOOTER":"Scooter L","planner.modeSelect.SCOOTER":"Scooter S","planner.modeSelect.RUN":"Run","planner.modeSelect.WALK":"Walk","planner.modeSelect.RECUMBENT_BIKE":"Recumbent","planner.modeSelect.GRAVEL_BIKE":"Gravel","planner.modeSelect.ELECTRIC_BIKE":"Mountain","planner.modeSelect.ELECTRIC_CARGO_BIKE":"Cargo","planner.modeSelect.ELECTRIC_CITY_BIKE":"City","planner.modeSelect.ELECTRIC_FIXIE_BIKE":"Fixie","planner.modeSelect.ELECTRIC_FOLDING_BIKE":"Folding","planner.modeSelect.ELECTRIC_GRAVEL_BIKE":"Gravel","planner.modeSelect.ELECTRIC_HYBRID_BIKE":"Hybrid","planner.modeSelect.ELECTRIC_RECUMBENT_BIKE":"Recumbent","planner.modeSelect.ELECTRIC_ROAD_BIKE":"Road","planner.modeSelect.ELECTRIC_SCOOTER":"Scooter","planner.bikes.I_USE":"I will use","planner.bikes.MY_BIKE":"My bike","planner.bikes.SHARED_BIKE":"Shared","planner.bikes.CITY_BIKE":"City bike","planner.bikes.ROAD_BIKE":"Road bike","planner.bikes.HYBRID_BIKE":"Treking bike","planner.bikes.MOUNTAIN_BIKE":"Mountain bike","planner.bikes.FOLDING_BIKE":"Folding bike","planner.bikes.CARGO_BIKE":"Cargo bike","planner.bikes.FIXIE_BIKE":"Fixie bike","planner.bikes.OTHER_BIKE":"Other bike","planner.bikes.BIG_SCOOTER":"Big scooter","planner.bikes.SCOOTER":"Small scooter","planner.bikes.RUN":"Run","planner.bikes.WALK":"Walk","planner.bikes.RECUMBENT_BIKE":"Recumbent bike","planner.bikes.GRAVEL_BIKE":"Gravel bike","planner.bikes.ELECTRIC_BIKE":"El. Mountain bike","planner.bikes.ELECTRIC_CARGO_BIKE":"El. Cargo bike","planner.bikes.ELECTRIC_CITY_BIKE":"El. City bike","planner.bikes.ELECTRIC_FIXIE_BIKE":"El. Fixie bike","planner.bikes.ELECTRIC_FOLDING_BIKE":"El. Folding bike","planner.bikes.ELECTRIC_GRAVEL_BIKE":"El. Gravel bike","planner.bikes.ELECTRIC_HYBRID_BIKE":"El. Treking bike","planner.bikes.ELECTRIC_RECUMBENT_BIKE":"El. Recumbent bike","planner.bikes.ELECTRIC_ROAD_BIKE":"El. Road bike","planner.bikes.ELECTRIC_SCOOTER":"El. Scooter","planner.modeSelect.okay":"Confirm","planner.isochrones.tooltip":"Range map: How far can you get in 10 minutes?","planner.ios.head":"Thanks for your interest!","planner.ios.text":"UrbanCyclers for iOS is currently under development and will be released in second half of April 2017. Find more information about the app at <a href=&quot;http:\/\/urbancyclers.com&quot; target=&quot;_blank&quot;>http:\/\/urbancyclers.com<\/a>.","planner.download.btn":"Download route","planner.download.head":"Download route","planner.download.skenQR":"Scan the QR code with your phone to load the suggested routes into your mobile app.","planner.download.playstore":"Download {{ appName }} for Android <i class=&quot;fa fa-android &quot; aria-hidden=&quot;true&quot;><\/i> app from <a href=&quot;https:\/\/play.google.com\/store\/apps\/details?id={{ googlePlayId }}&hl=en&quot;>Google Play<\/a>.","planner.download.gpx":"Download the route in the <b>GPX format<\/b>.","planner.download.download_gpx":"Download .gpx","profile.hello":"Hello","profile.status.beginner_cycler":"Beginner Cycler","profile.status.sunday_cycler":"Sunday Cycler","profile.status.urban_cycler":"Urban Cycler","profile.status.messenger":"Messenger","profile.badges.badgesCount":"badges","profile.badges.discover":"Discover all the badges you have earned!","profile.badges.forNext":"You need |XXX0| or |XXX1| to unlock new badge level!","profile.leaderboard.desc":"|XXX0| leaderboard","profile.leaderboard.first":"You are the best!","profile.leaderboard.top10":"You need |XXX0| to be the best!","profile.leaderboard.looser":"You need |XXX0| to reach Top 10!","profile.empty.head":"Welcome to UrbanCyclers!","profile.empty.cfa":"Please download our mobile app and start tracking your rides to enjoy all advantages of your UrbanCyclers profile!","rides.header":"menu.tracks&quot;];","rides.periodSelector.week":"Week","rides.periodSelector.month":"Month","rides.periodSelector.alltime":"All-time","rides.lengthSelector.short":"Short","rides.lengthSelector.midrange":"Mid-range","rides.lengthSelector.long":"Long","rides.track.deleteTrack":"Delete ride","rides.track.renavigate":"Find plan again!","badges.header":"menu.badges&quot;];","badges.toNextLevel":"|XXX0| more to get to the next level!","badges.toFirstLevel":"You need at least |XXX0| to unlock this badge!","badges.bestLevel":"You gained the top level with |XXX0|!","badges.distanceB.name":"Kilometers-eater","badges.distanceB.description":"Each tracked kilometer is counted.","badges.testerB.name":"TesterB","badges.testerB.description":"Test badge","badges.numOfRidesB.name":"Active rider","badges.numOfRidesB.description":"Tracked rides at least |XXX0| long are counted.","badges.globalExplorerB.name":"Explorer","badges.globalExplorerB.description":"Visit locations you have never been to, to unlock new square kilometers.","badges.pragueExplorerB.name":"Prague Explorer","badges.pragueExplorerB.description":"Visit locations you have never been to, to unlock new parts of the city.","badges.commuterB.name":"Daily commuter","badges.commuterB.description":"Commute daily between two locations to gain new leves.","badges.nightB.name":"Night-rider","badges.nightB.description":"Ride your bike during night to unlock this badge. Do not forget a headlight!","badges.hillClimberB.name":"Hill rider","badges.hillClimberB.description":"For each tracked ride with at least 80 meters uphill, you get one climb.","badges.hill":"climbs","badges.rides":"rides","badges.nightrides":"night rides","badges.commutes":"commutes","badges.cityPercent":"city","leaderboards.header":"menu.leaderboards","leaderboards.rides":"rides","leaderboards.periodSelector.week":"Week","leaderboards.periodSelector.month":"Month","leaderboards.periodSelector.allTime":"All-time","leaderboards.regionSelector.myregion":"My region","leaderboards.regionSelector.everywhere":"Everywhere","leaderboards.names.distanceL":"Distance","leaderboards.names.avgSpeedL":"Average speed","leaderboards.names.numOfRidesL":"Number of rides","leaderboards.users.you":"You!","leaderboards.users.average":"Average user","privacypolicy.head":"Privacy Policy","privacypolicy.lastupdate":"Last update","optout.head":"Mailing opt-out","optout.fail":"Opt-out was not successful, please contact us with your request on %s.","optout.success":"Opt-out from mail campaigns in category '%s' was successful. Thank you, have a nice day!","about.head":"About UrbanCyclers","competitions.head":"Competitions","competitions.connect.p1":"To connect the competition with the app, please open the link on your smartphone.","competitions.connect.how.head":"Please follow the these steps:","competitions.connect.how.li1":"In your web browser on your phone (e.g., Safari, Chrome), sign in to your account <a href=&quot;https:\/\/dpnk.dopracenakole.cz\/en\/aplikace\/&quot; target=&quot;_blank&quot;>https:\/\/dpnk.dopracenakole.cz\/en\/aplikace\/<\/a>","competitions.connect.how.li2":"Click on the link &quot;Connect with UrbanCyclers&quot;.","competitions.connect.how.li3":"The application will launch and connects with the competition.","competitions.connect.how.li4":"You will be able to send your ride to the competition on the ride details screen.","competitions.connect.p2":"In case of problems, please contact us at <a href=&quot;mailto:app@urbancyclers.com&quot;>app@urbancyclers.com<\/a>","competitions.userCompId":"Participant key","cancel_subs.head":"How to cancel the subscription","cancel_subs.l1":"Open the Play Store app.","cancel_subs.l2":"In the left drawer tap on Account and then Subscriptions.","cancel_subs.l3":"Select MANAGE and then Cancel subscription.","mount.head":"Smartphone Mount UrbanCyclers","mount.p1":"<strong>Smartphone mount UrbanCyclers<\/strong> is made of durable and high quality silicone. It is very light and compact. It allows you to mount a phone of almost any size. <strong>The mount worth 8 Eur is currently free as a gift<\/strong> for yearly subscription. ","mount.howto":"How to mount your phone?","mount.l1":"Pull the lower part of the mount through the upper part","mount.l2":"Drag the upper part of the mount and turn it on the lower part of the handlebars","mount.l3":"By stretching both ends of the mount we fasten the mount to the handlebars","mount.l4":"Place the phone in the prepared lugs","transport.plan_visibility":"Transparent plans","planner.planpanels.default":"Default","planner.planpanels.stress":"Traffic","planner.planpanels.surface":"Surface","planner.planpanels.surfaceSmoothness":"Surface smoothness","planner.planpanels.popularity":"Popularity","planner.planpanels.slope":"Steepness","planner.planpanels.airQ":"Air quality","planner.autocomplete.not_found":"Nothing found, apologies","transport.rekola":"Use rekola","transport.bikesharing":"Bikesharing","transport.own_bike":"My own bike","planner.direct":"Trip","planner.extra":"Tour","planner.poi_s":"Tour","planner.carfree":"Traffic","planner.flat":"Hills","planner.cleanair":"Clean air","planner.smooth":"Surface","planner.planpanels.elevationDrop":"elev. drop","planner.toggle":"Toggle settings","planner.select_poi":"Selected points-of-interest","planner.add_poi":"Add POIs","planner.descriptors.route_type":"Route type","planner.descriptors.bike_type":"Bike\/scooter type","planner.descriptors.circuit_length":"Ride at least","planner.toggle_route_warnings":"Toggle POIs","planner.graph_edit":"Edit & contribute","planner.slider.zero":"Direct route","planner.surface.excellent":"Asphalt","planner.surface.good":"Paved","planner.surface.intermediate":"Badly Paved","planner.surface.bad":"Smooth Unpaved","planner.surface.horrible":"Unpaved","planner.surface.impassable":"Bumpy Unpaved","planner.surface.unknown":"Unknown","planner.biketype":"I use","planner.more_opts":"More options","planner.elevation_profile":"elevation profile","planner.surface":"surface","planner.planpanels.other_opts":"Route preferences","planner.tooltip.carfree":"Specifies whether special priority should be given to avoiding segments with high car traffic. <br \/>\nZERO LEVEL = suggested routes do not consider car traffic during route planning<br \/>\nFIRST LEVEL = suggested routes avoid segments with high car traffic if reasonably possible (default)<br \/>\nSECOND LEVEL = suggested routes avoid high-traffic segments if at all possible","planner.tooltip.flat":"Specifies whether special priority should be given to avoiding climbs. <br \/>\nZERO LEVEL = suggested routes do not consider climbs during route planning<br \/>\nFIRST LEVEL = suggested routes avoid climbs if reasonably possible; reasonably possible means there exists an alternative route which is not significantly longer or worse in other bike-friendliness factors<br \/>\nSECOND LEVEL = suggested routes avoid climbs if at all possible.","planner.tooltip.smooth":"Specifies how road \/ cycleway surface should be handled.<br \/>\nZERO LEVEL = suggested routes do not consider surface smoothness during route planning<br \/>\nFIRST LEVEL = suggested routes prefer segments with smoother surface but do not avoid non-smooth segments if these are convenient for other reasons<br \/>\nSECOND LEVEL = suggested routes avoid segments with non-smooth surface if at all possible (the setting suitable for road bikes)","planner.carfree.lvl1.title":"Not considered","planner.carfree.lvl1.body":"Car traffic is not considered.","planner.carfree.lvl2.title":"Try to avoid","planner.carfree.lvl2.body":"Avoid car traffic if reasonable.","planner.carfree.lvl3.title":"Avoid","planner.carfree.lvl3.body":"Avoid car traffic even at the cost of a detour.","planner.smooth.lvl3.title":"Require paved","planner.smooth.lvl3.body":"Prefer smooth surface if possible at all. Best for road bikes.","planner.smooth.lvl2.title":"Prefer paved","planner.smooth.lvl2.body":"Prefer segments with smooth surface if not unsuitable due to other route criteria. Best for hybrid bikes.","planner.smooth.lvl1.title":"Prefer unpaved","planner.smooth.lvl1.body":"Prefer unpaved surface. Best for mountain bikes. WARNING: Routes can included segments which are only suitable for mountain bikes.","planner.smooth.lvl0.title":"Not considered","planner.smooth.lvl0.body":"Road surface is not considered.","planner.smooth.lvl05.title":"Mostly not considered","planner.smooth.lvl05.body":"Surface is not considered, except for avoiding segments with a very rough surface.","planner.flat.lvl3.title":"Avoid","planner.flat.lvl3.body":"Avoid steep climbs even at the cost of a detour or an increase in the total climbed height.","planner.flat.lvl2.title":"Try to avoid","planner.flat.lvl2.body":"Avoid steep climbs if reasonable.","planner.flat.lvl1.title":"Not considered","planner.flat.lvl1.body":"Climbs are not considered.","poi.modal.pladeholder":"Search","pages.faq.title":"Frequently Asked Questions","modals.geolocation.head":"One more thing before we get started.","modals.geolocation.btn":"Locate me","modals.geolocation.body":"<p>\n  To ensure the best experience, please allow our site to use your browser geolocation.\n<\/p>\n<p>\n  This will allow us correctly center the map so you <b>don't have to<\/b>.\n<\/p>\n<p>\n  You can also close this window and use the feature later:\n<\/p>\n<p class=\"text-center\">\n  <img src=\"\/v2.5\/img\/geolocate.png\" alt=\"Geolocation button\" style=\"width: 144px; height: 144px; border-radius: 50%; border: 1px solid lightgray;\" \/>\n<\/p>","planner.trip.select":"Pick one of our custom made trips","planner.trip.select_another":"Select another trip","planner.trip.back":"Select another trip","planner.trip.plan":"Select","planner.trip.preview":"View","picker.title":"Pick a version","picker.continue":"Continue to web version","picker.p":"It looks like you are visiting <code>{url}<\/code> <b>from a mobile device<\/b>. <br \/>\nWould you like to try our native mobile app instead?","doc.name":"GPX Importer","doc.title":"GPX Import","doc.desc":"GPX Importer for our cycling navigation. Drop your files here or read our how-to for how to export your data from different devices or apps.","doc.h1":"Import Your Activities","doc.apps":"Please select one of the options below","generic.or":"or","generic.help":"Need help importing your rides? Drop us a line at {{ email }}","user.anonymous":"Anonymous","modal.close":"Close","login.heading":"Sign in","login.lead":"Use the same credentials as you did in our mobile app","login.loading":"Loading","login.error":"Login error","login.again":"Log in again","login.logout":"Logout","login.not_found":"This user was not found","synced.heading.success_full":"Tremendous success","synced.heading.success_partial":"Partial success","synced.heading.failed":"Something went wrong","synced.lead":"%x\/%y files were imported.<br \/><br \/>\nSuccessfully imported rides will be visible in your account shortly.<br \/>","synced.state.READY":"Ready","synced.state.OK":"OK","synced.state.EMPTY_FILE":"We didn't find any tracks in this file","synced.state.INVALID_FILE":"Invalid file format, could not process","synced.state.FILE_ALREADY_EXISTS_SAME_USER":"You have already imported this file before","synced.state.FILE_ALREADY_EXISTS_ANOTHER_USER":"Identical file already exists in our database","synced.state.MISSING_TIMESTAMPS":"This file is missing one or more time-stamps","synced.state.USER_NOT_FOUND":"Unknown user","synced.state.MISSING_TIMESTAMPS.help":"We are unable to import your track correctly \ud83d\ude14.\nCheck if you followed the <a href=\"#\" onclick=\"slide(document.getElementById('btn-guide'), 'devices');\">instructions<\/a> for exporting track from the respective application.\nIf you still don\u2019t know, contact us at <a href=\"mailto:{{ email }}?subject=Ride import issues\">{{ email }}<\/a>.","strava.lead":"Getting your rides","strava.desc":"<p class=\"text-left\">\n  To <b>export a single ride<\/b> from your Strava account, please follow the instructions below.\n<\/p>\n<ol class=\"text-left\">\n  <li>Log in to your Strava account from a computer.<\/li>\n  <li>Open the Activity - Ride page that you want to export.<\/li>\n  <li>On the left, from the more (ellipses) menu, select \"Export GPX\".<\/li>\n  <li>The file will be downloaded to your computer.<\/li>\n  <li>You can upload the GPX file to your account using this import tool.<\/li>\n<\/ol>\n<p class=\"text-left\">\n  In case you would like to <b>export all of your rides at once<\/b>, you need to export the complete archive of your Strava account. To do so, you need to:\n<\/p>\n<ol class=\"text-left\">\n  <li>Log in to your Strava account from a computer.<\/li>\n  <li>Hover over your name in the upper right-hand corner of the Strava page. Choose \"Settings,\" then find the \"My Account\" tab from the menu listed on the Left.<\/li>\n  <li>Select \u201cGet Started\u201d under \u201cDownload or Delete Your Account.\u201d<\/li>\n  <li>Select \u201cRequest your archive\u201d on the next page.<\/li>\n  <li>You will receive an email with a link to download your data (this may take a few hours.) The email will be sent to the email account attached to your Strava profile. (or Facebook profile if you signed-in by Facebook) <\/li>\n  <li>In your data archive, within the zipped folder with all your activities, find your rides folder. Only a folder containing GPX files can be used. In case your rides are downloaded in a different format, you need to proceed as in Case 1. <\/li>\n  <li>You can upload the folder with your rides containing the GPX files to your account using this import tool.<\/li>\n<\/ol>","garmin.lead":"Getting your rides","garmin.desc":"<p class=\"text-left\">\n  To <b>export a single ride<\/b> from your Garmin Connect account, please do the following:\n<\/p>\n<ol class=\"text-left\">\n  <li>Sign in to your Garmin Connect account from a computer.<\/li>\n  <li>In the top left corner, click on the Arrow Icon to expand the Navigation Bar.<\/li>\n  <li>Select \u201cActivities\u201d, then select \u201cAll Activities\u201d.<\/li>\n  <li>Click on the title of the activity you would like to export.<\/li>\n  <li>Click on the gear icon in the top right corner.<\/li>\n  <li>Select \u201cExport to GPX\u201d and save the file to your computer.<\/li>\n  <li>Upload the GPX file to your account using this import tool.<\/li>\n<\/ol>\n<p class=\"text-left\">\n  To <b>export all rides at once<\/b>, you need to request all data associated with your Garmin Connect account:\n<\/p>\n<ol class=\"text-left\">\n  <li>From a computer, sign in to <a href=\"https:\/\/www.garmin.com\/en-US\/account\/profile\/\" target=\"_blank\" rel=\"noopener\">Account Management center<\/a>.<\/li>\n  <li>In the bottom of the page click on the black and white button \u201cManage your data\u201d.<\/li>\n  <li>Select \u201cExport Your data\u201d<\/li>\n  <li>Click on \u201cRequest Data Export\u201d.<\/li>\n  <li>Your request will be submitted and a download link will be emailed to your email account associated with your Garmin Connect account. (This process might take 48 hours upto 30 days.)<\/li>\n  <li>In downloaded data, select the folder containing your cycling activities. They should be in the GPX format. (If they are in a different format, you need to export your rides as described in Case 1.)<\/li>\n  <li>You can upload the GPX files folder to your account using this import tool.<\/li>\n<\/ol>","endomondo.lead":"Getting your rides","endomondo.desc":"<p class=\"text-left\">\n  On December 31st, 2020, Endomondo will be retired and rendered inoperative. \n<\/p>\n<p class=\"text-left\">\n  Your Endomondo data will be deleted after March 31, 2021. If you wish to request access to your data or port it to another platform, it must occur prior to that date.\n<\/p>\n<p class=\"text-left\">\n  To <b>export a single ride<\/b> from your Endomondo account please do the following:\n<\/p>\n<ol class=\"text-left\">\n  <li>Sign in to your Endomondo account from a computer.<\/li>\n  <li>Go to the activity you want to export.<\/li>\n  <li>In the top right corner click on the arrow and select \u201cExport\u201d.<\/li>\n  <li>Select GPX file to download to your computer.<\/li>\n  <li>You can upload the GPX file to your account using this import tool.<\/li>\n<\/ol>\n<p class=\"text-left\">\n  To <b>export all rides<\/b> at once from your Endomondo account, you need to create an archive of all the activities, please proceed as follows:\n<\/p>\n<ol class=\"text-left\">\n  <li>Sign in to your Endomondo account from a computer.<\/li>\n  <li>Visit your <a href=\"https:\/\/www.endomondo.com\/login?returnUrl=~2Fsettings~2Faccount\" target=\"_blank\" rel=\"noopener\">Endomondo Account Settings<\/a>.<\/li>\n  <li>Under \u201cExport and Download Your Data\u201d click on the \u201cGet Started\u201d.<\/li>\n  <li>Click on the \"Create archive\".<\/li>\n  <li>Enter your email and password (or continue with Facebook) to confirm your identity.<\/li>\n  <li>Click on the \"Create archive\".<\/li>\n  <li>Within a few days, you will receive an email containing a confirmation of your download request. <\/li>\n  <li>After a period of time (up to 10 days), you'll receive a new email with a download link - click on the link to download the zip file with your user data. In case your rides are not in GPX format files, you need to export them as described in Case 1.<\/li>\n  <li>You can upload the folder with GPX files to your account using this import tool.<\/li>\n<\/ol>","tracker.lead":"Getting your rides","tracker.desc":"<p class=\"text-left\">\n  To <b>export a single ride<\/b> from your Sports Tracker account, please do the following:\n<\/p>\n<ol class=\"text-left\">\n  <li>Log in to your Sports Tracker account from a computer.<\/li>\n  <li>Select the ride you want to export. <\/li>\n  <li>In the top right corner, you click on \"EDIT\".<\/li>\n  <li>In the top right corner, click on the orange button \"EXPORT\" and save the GPX file to your computer.<\/li>\n  <li>You can upload the GPX file to your account using this import tool.<\/li>\n<\/ol>\n<p class=\"text-left\">\n  To <b>export all rides at once<\/b> from your Sports Tracker account, you need to send a request to all data export:\n<\/p>\n<ol class=\"text-left\">\n  <li>Log into your Sports Tracker account from a computer.<\/li>\n  <li>Click on the \u201cSUPPORT\u201d in the top of the page.<\/li>\n  <li>In the top right, click on the \u201cCONTACT US\u201d orange button.<\/li>\n  <li>Reply to all required questions in the form that opens.<\/li>\n  <li>In the line with the question: \u201cWhat does the issue concern?\u201d Select \u201cexport all data\u201d.<\/li>\n  <li>When the exporting has started, you'll receive an email telling you this.<\/li>\n  <li>You'll receive another email with a link to your data when the exporting has been done.<\/li>\n  <li>In the downloaded ZIP file, find the rides folder. If the rides folder does not contain GPX format files, please follow the instructions from Case 1.<\/li>\n  <li>You can upload the folder with GPX files to your account using this import tool.<\/li>\n<\/ol>","toggle.computer":"From Computer","toggle.computer.lead":"Works for .gpx files","toggle.apps":"App & Devices","toggle.apps.line2":"Strava, Garmin etc.","uploader.file_1":"file","uploader.files_n":"files","uploader.to_sync":"to sync","uploader.sync":"Sync","uploader.file":"File","uploader.date":"Date","uploader.distance":"Distance","uploader.duration":"Duration","uploader.skipped":"{cnt} file(s) were skipped. Only .gpx files are supported. Make sure you process a maximum of 25 files at a time.","uploader.message":"<span class=\"_line1\">\n    Drop your files here, or <span class=\"_highlight\">browse<\/span><br \/>\n<\/span>\n<span class=\"_line2\">\n    Works for .gpx files 25MB or smaller.<br \/>\n    Choose up to 25 files\n<\/span>","uploader.reset":"Remove files and start over","contribute.doc.name":"Contribute Your Rides","contribute.doc.title":"Contribute Your Rides","contribute.doc.desc":"Your data will be used for estimating the flows of cyclists through different segments of the cycling transport network. This estimation is further used for transport planning and optimization of the investments in cycling infrastructure.","contribute.doc.h1":"Contribute Your Rides","contribute.doc.apps":"Please select one of the options below","contribute.generic.or":"or","contribute.user.anonymous":"Anonymous","contribute.modal.close":"Close","contribute.login.heading":"Please log in","contribute.login.lead":"Sign in to your account so we can import your rides.","contribute.login.loading":"Loading","contribute.login.error":"Login error","contribute.login.again":"Log in again","contribute.login.logout":"Logout","contribute.synced.heading.success_full":"Tremendous success","contribute.synced.heading.success_partial":"Partial success","contribute.synced.heading.failed":"Something went wrong","contribute.synced.lead":"%x\/%y files were imported.<br \/><br \/>\nSuccessfully imported rides will be used to improve our services.<br \/>","contribute.synced.state.OK":"OK","contribute.synced.state.EMPTY_FILE":"We didn't find any tracks in this file","contribute.synced.state.INVALID_FILE":"Invalid file format, could not process","contribute.synced.state.FILE_ALREADY_EXISTS_SAME_USER":"You have already imported this file before","contribute.synced.state.FILE_ALREADY_EXISTS_ANOTHER_USER":"Identical file already exists in our database","contribute.synced.state.MISSING_TIMESTAMPS":"This file is missing one or more time-stamps","contribute.strava.lead":"Getting your rides","contribute.strava.desc":"<p class=\"text-left\">\n  To <b>export a single ride<\/b> from your Strava account, please follow the instructions below.\n<\/p>\n<ol class=\"text-left\">\n  <li>Log in to your Strava account from a computer.<\/li>\n  <li>Open the Activity - Ride page that you want to export.<\/li>\n  <li>On the left, from the more (ellipses) menu, select \"Export GPX\".<\/li>\n  <li>The file will be downloaded to your computer.<\/li>\n  <li>You can upload the GPX file to your account using this import tool.<\/li>\n<\/ol>\n<p class=\"text-left\">\n  In case you would like to <b>export all of your rides at once<\/b>, you need to export the complete archive of your Strava account. To do so, you need to:\n<\/p>\n<ol class=\"text-left\">\n  <li>Log in to your Strava account from a computer.<\/li>\n  <li>Hover over your name in the upper right-hand corner of the Strava page. Choose \"Settings,\" then find the \"My Account\" tab from the menu listed on the Left.<\/li>\n  <li>Select \u201cGet Started\u201d under \u201cDownload or Delete Your Account.\u201d<\/li>\n  <li>Select \u201cRequest your archive\u201d on the next page.<\/li>\n  <li>You will receive an email with a link to download your data (this may take a few hours.) The email will be sent to the email account attached to your Strava profile. (or Facebook profile if you signed-in by Facebook) <\/li>\n  <li>In your data archive, within the zipped folder with all your activities, find your rides folder. Only a folder containing GPX files can be used. In case your rides are downloaded in a different format, you need to proceed as in Case 1. <\/li>\n  <li>You can upload the folder with your rides containing the GPX files to your account using this import tool.<\/li>\n<\/ol>","contribute.garmin.lead":"Getting your rides","contribute.garmin.desc":"<p class=\"text-left\">\n  To <b>export a single ride<\/b> from your Garmin Connect account, please do the following:\n<\/p>\n<ol class=\"text-left\">\n  <li>Sign in to your Garmin Connect account from a computer.<\/li>\n  <li>In the top left corner, click on the Arrow Icon to expand the Navigation Bar.<\/li>\n  <li>Select \u201cActivities\u201d, then select \u201cAll Activities\u201d.<\/li>\n  <li>Click on the title of the activity you would like to export.<\/li>\n  <li>Click on the gear icon in the top right corner.<\/li>\n  <li>Select \u201cExport to GPX\u201d and save the file to your computer.<\/li>\n  <li>Upload the GPX file to your Account using this import tool.<\/li>\n<\/ol>\n<p class=\"text-left\">\n  To <b>export all rides at once<\/b>, you need to request all data associated with your Garmin Connect account:\n<\/p>\n<ol class=\"text-left\">\n  <li>From a computer, sign in to <a href=\"https:\/\/www.garmin.com\/en-US\/account\/profile\/\" target=\"_blank\" rel=\"noopener\">Account Management center<\/a>.<\/li>\n  <li>In the bottom of the page click on the black and white button \u201cManage your data\u201d.<\/li>\n  <li>Select \u201cExport Your data\u201d<\/li>\n  <li>Click on \u201cRequest Data Export\u201d.<\/li>\n  <li>Your request will be submitted and a download link will be emailed to your email account associated with your Garmin Connect account. (This process might take 48 hours upto 30 days.)<\/li>\n  <li>In downloaded data, select the folder containing your cycling activities. They should be in the GPX format. (If they are in a different format, you need to export your rides as described in Case 1.)<\/li>\n  <li>You can upload the GPX files folder to your account using this import tool.<\/li>\n<\/ol>","contribute.endomondo.lead":"Getting your rides","contribute.endomondo.desc":"<p class=\"text-left\">\n  On December 31st, 2020, Endomondo will be retired and rendered inoperative. \n<\/p>\n<p class=\"text-left\">\n  Your Endomondo data will be deleted after March 31, 2021. If you wish to request access to your data or port it to another platform, it must occur prior to that date.\n<\/p>\n<p class=\"text-left\">\n  To <b>export a single ride<\/b> from your Endomondo account please do the following:\n<\/p>\n<ol class=\"text-left\">\n  <li>Sign in to your Endomondo account from a computer.<\/li>\n  <li>Go to the activity you want to export.<\/li>\n  <li>In the top right corner click on the arrow and select \u201cExport\u201d.<\/li>\n  <li>Select GPX file to download to your computer.<\/li>\n  <li>You can upload the GPX file to your account using this import tool.<\/li>\n<\/ol>\n<p class=\"text-left\">\n  To <b>export all rides<\/b> at once from your Endomondo account, you need to create an archive of all the activities, please proceed as follows:\n<\/p>\n<ol class=\"text-left\">\n  <li>Sign in to your Endomondo account from a computer.<\/li>\n  <li>Visit your <a href=\"https:\/\/www.endomondo.com\/login?returnUrl=~2Fsettings~2Faccount\" target=\"_blank\" rel=\"noopener\">Endomondo Account Settings<\/a>.<\/li>\n  <li>Under \u201cExport and Download Your Data\u201d click on the \u201cGet Started\u201d.<\/li>\n  <li>Click on the \"Create archive\".<\/li>\n  <li>Enter your email and password (or continue with Facebook) to confirm your identity.<\/li>\n  <li>Click on the \"Create archive\".<\/li>\n  <li>Within a few days, you will receive an email containing a confirmation of your download request. <\/li>\n  <li>After a period of time (up to 10 days), you'll receive a new email with a download link - click on the link to download the zip file with your user data. In case your rides are not in GPX format files, you need to export them as described in Case 1.<\/li>\n  <li>You can upload the folder with GPX files to your account using this import tool.<\/li>\n<\/ol>","contribute.tracker.lead":"Getting your rides","contribute.tracker.desc":"<p class=\"text-left\">\n  To <b>export a single ride<\/b> from your Sports Tracker account, please do the following:\n<\/p>\n<ol class=\"text-left\">\n  <li>Log in to your Sports Tracker account from a computer.<\/li>\n  <li>Select the ride you want to export. <\/li>\n  <li>In the top right corner, you click on \"EDIT\".<\/li>\n  <li>In the top right corner, click on the orange button \"EXPORT\" and save the GPX file to your computer.<\/li>\n  <li>You can upload the GPX file to your account using this import tool.<\/li>\n<\/ol>\n<p class=\"text-left\">\n  To <b>export all rides at once<\/b> from your Sports Tracker account, you need to send a request to all data export:\n<\/p>\n<ol class=\"text-left\">\n  <li>Log into your Sports Tracker account from a computer.<\/li>\n  <li>Click on the \u201cSUPPORT\u201d in the top of the page.<\/li>\n  <li>In the top right, click on the \u201cCONTACT US\u201d orange button.<\/li>\n  <li>Reply to all required questions in the form that opens.<\/li>\n  <li>In the line with the question: \u201cWhat does the issue concern?\u201d Select \u201cexport all data\u201d.<\/li>\n  <li>When the exporting has started, you'll receive an email telling you this.<\/li>\n  <li>You'll receive another email with a link to your data when the exporting has been done.<\/li>\n  <li>In the downloaded ZIP file, find the rides folder. If the rides folder does not contain GPX format files, please follow the instructions from Case 1.<\/li>\n  <li>You can upload the folder with GPX files to your account using this import tool.<\/li>\n<\/ol>","contribute.toggle.computer":"Contribute","contribute.toggle.computer.lead":"Works for .gpx files","contribute.toggle.apps":"Guides","contribute.toggle.apps.line2":"How to export","contribute.uploader.file_1":"file","contribute.uploader.files_n":"files","contribute.uploader.to_sync":"to process","contribute.uploader.sync":"Contribute","contribute.uploader.file":"File","contribute.uploader.date":"Date","contribute.uploader.distance":"Distance","contribute.uploader.duration":"Duration","contribute.uploader.skipped":"{cnt} file(s) were skipped. Only .gpx files are supported. Make sure you process a maximum of 25 files at a time.","contribute.uploader.message":"<span class=\"_line1\">\n    Drop your files here, or <span class=\"_highlight\">browse<\/span><br \/>\n<\/span>\n<span class=\"_line2\">\n    Works for .gpx files 25MB or smaller.<br \/>\n    Choose up to 25 files\n<\/span>","contribute.anonymous.welcome":"Are you using different app or gadget? And you still want your data to be useful for city and transportation planning? Contribute them here! Your data will be anonymized and used in aggregated form.","contribute.anonymous.faq_q1":"How will be my data used?","contribute.anonymous.faq_a1":"Your data will be used for estimating the flows of cyclists through different segments of the cycling transport network. This estimation is further used for transport planning and optimization of the investments in cycling infrastructure.","contribute.anonymous.faq_q2":"How do you anonymize my data?","contribute.anonymous.faq_a2":"We remove first 200-300 hundred meters of the trajectory. In the analysis outputs no raw data is used. The data is aggregated with data from other cyclists.","contribute.anonymous.faq_q3":"Where do I get the GPX file?","contribute.anonymous.faq_a3":"You can download GPX from your app\u2019s\/gadget\u2019s profile. See our <a href=\"#\" onclick=\"slide(document.getElementById('btn-guide'), 'devices');\">guide<\/a> for most used services.","planner.cookies.message":"This page uses Cookies to deliver it's services","planner.mapobject.likes":"likes","planner.mapobject.dislikes":"dislikes","planner.mapobject.comments":"comments","planner.traveler.title":"I travel with","planner.traveler.alone":"Alone","planner.traveler.in_group":"Ina group","planner.traveler.with_children":"With children","download_plan":"Download plan","time":"Time","toggle_isochrones":"Show range map","transport.avoid_pollution":"Polluted areas","planner.avoid_pollution.lvl1.title":"Not considered","planner.avoid_pollution.lvl1.body":"Air pollution is not considered.","planner.avoid_pollution.lvl2.title":"Try to avoid","planner.avoid_pollution.lvl2.body":"Avoid polluted areas if reasonable.","planner.avoid_pollution.lvl3.title":"Avoid","planner.avoid_pollution.lvl3.body":"Avoid polluted areas even at the cost of a detour or an increase in the total climbed height.","invite.title":"Cycling Team {{ team }}","invite.h1":"Cycling Team <b>{{ team }}<\/b>","invite.h2":"Team description","invite.h3":"How to join a team","invite.step1":"Open the {{ appName }} app, if you don\u2019t already have it you can download it using the links above, and go to your profile.","invite.step2":"Click on \"Join a team\".","invite.step3":"Popup will appear. Enter the code <code>{{ code }}<\/code> and hit \"Submit\".","invite.step4":"Congratulation!  \ud83c\udf89<br \/>  You\u2019ve joined {{ team }}.","invite.step5":"If you have any questions please contact us at <a href=\"mailto:info@smartdublin.ie\">info@smartdublin.ie<\/a>","invite.code":"Unique code of this team","invite.copy":"Copy","invite.copied":"Copied!","invite.stats":"Statistics","members.members":"Team members","members.distance":"Team total distance this month","members.rides":"Team total rides this month","trip.has_invited_you":"invited you to a ride!","trip.date":"Date","trip.time":"Time","trip.trip_notes":"Notes","trip.match":"Match","trip.distance":"Distance","trip.elevation":"Elevation gain","trip.accept":"Accept","trip.trip_attendees":"Ride participants","trip.photos":"Pictures from this area","3rd.title":"%name wants you to join {{ appName }}, community-driven trip planner","3rd.share_title":"%name wants you to join {{ appName }}","3rd.title_nodata":"We invite you to join {{ appName }}, community-driven trip planner","3rd.h1":"<strong>%name<\/strong> wants you to join <strong>{{ appName }}<\/strong>,<br \/> Community-driven <strong>trip<\/strong> planner.","3rd.h1_nodata":"We invite you to join <strong>{{ appName }}<\/strong>,<br \/> Community-driven <strong>trip<\/strong> planner.","3rd.discount":"Voucher","3rd.download":"Download the <strong>{{ appName }}<\/strong> app for iOS & Android","3rd.app_description":"New bicycle route planner considering the air-quality along streets. Helps you discover new interesting routes with the cleanest air.","3rd.meta_description":"New bicycle route planner considering the air-quality along streets. Helps you discover new interesting routes with the cleanest air.","3rd.footer_txt":"Travel with <strong>{{ appName }}<\/strong><br \/>... and enjoy cycling","3rd.footer_copyright":"Made for cyclists","3rd.30days":"30 days","3rd.free":"free","3rd.roadmap":"Ride map","3rd.performance":"Performance","3rd.gamepoints":"Gamepoints","3rd.comments":"Comments","3rd.likes":"Likes","3rd.bike_friendliness":"Bike friendliness","3rd.total_time":"Total time","3rd.total_distance":"Total distance","3rd.energy":"Energy","3rd.raised_h_meters":"Elevation gain","3rd.speed":"Avg. speed","3rd.co2":"CO2","3rd.Total time":"Total time","3rd.elevation":"Elevation","3rd.invite_friend":"Invite friend","3rd.invite_friend_p":"Invite <b>friend<\/b> from your city and enjoy the fun together","3rd.today":"Today","3rd.best_riders":"Best riders","3rd.feedback":"Feedback","3rd.news":"News","3rd.rides":"Rides","3rd.riders":"Riders","3rd.cooperation":"In cooperation with:","3rd.no_comments":"No comment","3rd.savings":"Savings","3rd.show":"Show","3rd.error_404_h1":"Whoops!","3rd.error_404_lead":"Error 404","3rd.error_404_p":"This page was not found.","3rd.error_404_continue":"Continue","3rd.error_500_h1":"Whoops!","3rd.error_500_lead":"Error 500","3rd.error_500_p":"An error occured while processing your request.","3rd.error_500_continue":"Continue","pages.privacy.title":"Privacy Policy","pages.privacy.parts.since":"<p>\n  <em>This Privacy Policy is valid from {{ validFrom }}.<\/em>\n<\/p>","pages.privacy.parts.a1":"<p>\n  Your privacy is important to us. This privacy policy explains what personal data we collect from you, how we use it,\n  how we protect them, and what are your rights with respect to GDPR (General Data Protection Regulation). This policy\n  applies to the product {{ appName }} and all its components.\n<\/p>","pages.privacy.parts.b0":"<h2 class=\"h2\">Who is the data controller?<\/h2>","pages.privacy.parts.b1":"<p>\n  Umotional s.r.o. is the data controller for personal data we collect through {{ appName }} subject to this\n  statement. Our address is Umotional s.r.o., B\u011blehradsk\u00e1 858\/23, 120 00 Praha 2, Czech Republic.\n<\/p>","pages.privacy.parts.c0":"<h2 class=\"h2\">How you can contact us?<\/h2>","pages.privacy.parts.c1":"<p>\n  If you have a privacy concern or a question for the Chief Privacy Officer of our company, please contact us by using\n  email <a href=\"mailto:{{ contactEmail }}\">{{ contactEmail }}<\/a>. We will respond to questions or concerns within 30\n  days.\n<\/p>","pages.privacy.parts.d0":"<h2 class=\"h2\">Personal Data We Collect after Sign in to {{ appName }} Account<\/h2>","pages.privacy.parts.d1":"<p>With {{ appName }} account, you can sign into all parts of {{ appName }} application. Your personal\n  {{ appName }} account is automatically created when you first login using authentication by one of our\n  partners (Google, Facebook). Your personal data created or set up in {{ appName }} app are securely stored in\n  your {{ appName }} account and are not linked to the provider you used to sign in.\n<\/p>","pages.privacy.parts.d2":"<p>In order to <strong>provide and improve {{ appName }}<\/strong>, we process the following three categories of\n  personal data <strong>based on your consent with this privacy policy.<\/strong>. We process this data for a period,\n  during which we provide you the {{ appName }} service (i.e., until the withdrawal of your consent or until\n  the deletion your {{ appName }} account).\n<\/p>","pages.privacy.parts.d3":"<ol>\n  <li><strong>Contact data<\/strong>. We collect your nickname, email address and profile photo.<\/li>\n  <li><strong>Tracked rides and location data<\/strong>. We collect your tracked rides and data about your location.\n        Location data can be Global Position System (GPS) data, as well as data identifying nearby cell towers and Wi-Fi\n        hotspots.<\/li>\n  <li><strong>Usage data<\/strong>. We collect data about how you and your device interact with us and {{ appName }}. For example, we collect:\n    <ul>\n      <li>\n        <strong>Product use data<\/strong>. We collect data about the features you use.\n      <\/li>\n      <li>\n        <strong>Error reports and performance data<\/strong>.\n        We collect data about the performance of {{ appName }} and any problems you experience with them. This data helps us to diagnose problems and to\n        improve {{ appName }}. Error reports can include data such as the type or severity of the\n        problem, details of the software or hardware related to an error, contents of files you were using when\n        an error occurred, and data about other software on your device.\n      <\/li>\n    <\/ul>\n  <\/li>\n<\/ol>","pages.privacy.parts.d4":"<p>We use the data in the following ways:<\/p>","pages.privacy.parts.d5":"<ul>\n  <li><strong>Providing {{ appName }}<\/strong>. We use data to carry out your transactions with us and to\n        provide {{ appName }} to you. {{ appName }} include personalized features and recommendations that\n        enhance your productivity and enjoyment, and tailor your experiences based on your activities, interests and\n        location.\n  <\/li>\n  <li>\n    <strong>Customer support<\/strong>.\n      We use data to diagnose product problems, repair customers' devices, and\n      provide other customer care and support services.\n  <\/li>\n  <li>\n    <strong>{{ appName }} improvement<\/strong>.\n    We use data to continually improve {{ appName }},\n    including adding new features or capabilities, such as using error reports to improve security features, or\n    using usage data to determine what new features to prioritize.\n  <\/li>\n  <li>\n    <strong>Security, safety and dispute resolution<\/strong>.\n    We use data to protect the security and safety of our\n    products and our customers, to detect and prevent fraud, to confirm the validity of software licenses, to\n    resolve disputes and enforce our agreements.\n  <\/li>\n  <li>\n    <strong>Business operations<\/strong>.\n    We use data to develop aggregate analysis and business intelligence that\n    enable us to operate, protect, make informed decisions, and report on the performance of our business.\n  <\/li>\n  <li>\n    <strong>Communication<\/strong>.\n    We use data we collect to deliver and personalize our communications with you.\n    For example, we may contact you by email or other means to inform you when a subscription is ending, let you\n    know when security updates are available, update you or inquire about a service or repair request, invite you to\n    participate in a survey, or tell you that you need to take action to keep your account active.\n  <\/li>\n<\/ul>","pages.privacy.parts.d6":"<p>\n  For <strong>sending commercial communications<\/strong> in accordance with the Act No. 480\/2004 Coll. in the form of\n  email newsletters containing offers, information and news, we process your <strong>email address based on our\n  legitimate interest<\/strong>. We process the data for an indefinite period until the recipient unsubscribes from\n  the subscription.\n<\/p>","pages.privacy.parts.e0":"<h2 class=\"h2\">Data We Collect without Signing in to {{ appName }} Account<\/h2>","pages.privacy.parts.e1":"<p>For the provision and improvement of {{ appName }}, we process the usage data <strong>based on our legitimate\n  interest for 2 years<\/strong>. The data includes product usage data, error reports, and performance data. To\n  process the data, we use external processors described in the following section.\n<\/p>","pages.privacy.parts.f0":"<h2 class=\"h2\">Transfer of personal data to third parties<\/h2>","pages.privacy.parts.f1":"<p>\n  Most of the processing operations are handled by ourselves and we do not need the 3rd parties for them. In order to\n  provide some specific processing operations that we cannot provide ourselves, we use the services and applications\n  of processors who specialize in the processing and are in compliance with the GDPR. To process the product\n  <strong>usage data<\/strong>, we use the following data processors:\n<\/p>","pages.privacy.parts.f2":"<ul>\n  <li>Google Analytics (<a href=\"https:\/\/www.google.com\/analytics\/terms\/cz.html\">Terms of Service<\/a>)<\/li>\n  <li>Facebook Analytics (<a href=\"https:\/\/en-us.facebook.com\/about\/privacy\">Data Policy<\/a>)<\/li>\n  <li>Firebase (<a href=\"https:\/\/firebase.google.com\/support\/privacy\/\">Privacy Policy<\/a>)<\/li>\n  <li>\n    Fabric Answers (<a href=\"https:\/\/fabric.io\/dpst.pdf\">Data Processing and Security Terms<\/a>) processes\n    Installation UUID, Android IDs, IP addresses for the period of 180 days.\n  <\/li>\n<\/ul>","pages.privacy.parts.f3":"<p>\n  We use Fabric Crashlytics to process <strong>error reports<\/strong> based on \n  <a href=\"https:\/\/fabric.io\/dpst.pdf\">Data Processing and Security Terms<\/a>. They process Installation UUID and\n  error reports for the period of 90 days.\n<\/p>","pages.privacy.parts.g0":"<h2 class=\"h2\">Your Rights in Relation to the Protection of Personal Data<\/h2>","pages.privacy.parts.g1":"<p>\n  You have a number of rights in relation to the protection of your personal data. If you wish to use any of these\n  rights, please contact us via e-mail <a href=\"mailto:{{ contactEmail }}\">{{ contactEmail }}<\/a>. We will process your requests within 30 days.\n<\/p>","pages.privacy.parts.g2":"<p>\n  You have the <strong>right to information<\/strong> that is already fulfilled by this information page with the\n  privacy policy. You can use your <strong>right to access<\/strong> and we will send you what personal data about you\n  is processed and why. If anything changes or you find your personal information outdated or incomplete, you have the\n  <strong>right to add and change<\/strong> your personal information.\n<\/p>","pages.privacy.parts.g3":"<p>\n  You have the <strong>right to restrict the processing<\/strong> of your personal data if you think we are processing\n  your inaccurate data or you think we are processing the data illegally, but you do not want to delete all the data\n  or if you object to the processing. You can restrict the range of personal data or processing purposes. (For\n  example, unsubscribing from the newsletter restricts the purpose of processing to send commercial communications.)\n  You may also revoke the consent to the processing of your personal information. After the restriction or revocation\n  of the consent, a part of or whole {{ appName }} service may not be available to you.\n<\/p>","pages.privacy.parts.g4":"<p>\n  If you would like to take your personal information and transfer it to someone else, you have the <strong>right of\n  data portability<\/strong>. We will deliver your personal data in machine-readable form.\n<\/p>","pages.privacy.parts.g5":"<p>\n  We do not want to forget about you, but if you wish, you have the <strong>right to erasure(deletion)<\/strong>. In this case, we\n  will erase(delete) all your personal data from the system and backups. We will notify you by e-mail about the completion of\n  the erasure.\n<\/p>","pages.privacy.parts.g6":"<p>\n  If you feel that we do not comply with the law with your personal data, you have the <strong>right to appeal<\/strong>\n  at any time to the Office for Personal Data Protection. We will be very pleased if you first inform us about this\n  suspicion so we can do something about it and correct any misconduct.\n<\/p>","pages.privacy.parts.g7":"<p>\n  Emails with inspiration, articles or products and services are sent to you if you are our customer based on our\n  legitimate interest. <strong>You can unsubscribe via the unsubscribe link<\/strong> in each email.\n<\/p>","pages.privacy.parts.h0":"<h2 class=\"h2\">Cookies and Similar Technologies<\/h2>","pages.privacy.parts.h1":"<p>\n  We use cookies (small text files placed on your device) and similar technologies to provide our websites and online\n  services and help collect data. The text in a cookie often consists of a string of numbers and letters that uniquely\n  identifies your computer, but it can contain other information as well. {{ appName }} use other identifiers,\n  such as the internal ID, for similar purposes. We perceive this as our legitimate interest because we believe that\n  by using cookies we can deliver even better services to you.\n<\/p>","pages.privacy.parts.h2":"<p>\n  We use cookies and similar technologies for several purposes, including:\n<\/p>","pages.privacy.parts.h3":"<ul>\n  <li>\n    <strong>Storing your Preferences and Settings<\/strong>. Settings that {{ appName }} to operate correctly\n    or that maintain your preferences over time may be stored on your device. For example, if you enter your city,\n    we may store that data in a cookie so that you will see the relevant part of the map when you return to the\n    site.\n  <\/li>\n  <li>\n    <strong>Sign-in and Authentication<\/strong>. When you sign in, we store a unique ID number, and the time you\n        signed in, in an encrypted cookie on your device. This cookie allows you to move from page to page within the\n        site without having to sign in again on each page.\n  <\/li>\n  <li>\n    <strong>Analytics<\/strong>. In order to provide {{ appName }}, we use cookies and other identifiers to\n    gather usage and performance data. For example, we use cookies to count the number of unique visitors to a web\n    page or service and to develop other statistics about the operations of our products.\n  <\/li>\n<\/ul>","pages.privacy.parts.h4":"<p>\n  We entrusted the following data processors to do web analytics for us:\n<\/p>","pages.privacy.parts.h5":"<ul>\n  <li>Google Analytics (<a href=\"https:\/\/www.google.com\/analytics\/terms\/cz.html\">Terms of Serice<\/a>)<\/li>\n  <li>Facebook Pixel (<a href=\"https:\/\/en-us.facebook.com\/about\/privacy\">Data Policy<\/a>)<\/li>\n<\/ul>","pages.privacy.parts.h6":"<p>\n  In other cases, it is because our web pages contain content from third parties, such as videos or news content.\n  Because your browser connects to those third parties' web servers to retrieve that content, those third parties are\n  able to set or read their own cookies on your device and may collect information about your online activities across\n  websites or online services.\n<\/p>","pages.privacy.parts.h7":"<p>\n  <strong>How you can control cookies?<\/strong> Most web browsers automatically accept cookies but provide controls\n  that allow you to block or delete them. For example, in Microsoft Edge, you can block or delete cookies by clicking\n  <strong>Settings \u2026 Privacy \u2026 Cookies<\/strong>. Instructions for blocking or deleting cookies in other browsers may\n  be available in each browser's privacy or help documentation.\n<\/p>","pages.privacy.parts.h8":"<p>\n  Certain features of {{ appName }} depend on cookies. Please be aware that if you choose to block cookies, you\n  may not be able to sign in or use those features, and preferences that are dependent on cookies may be lost. If you\n  choose to delete cookies, settings and preferences controlled by those cookies, including advertising preferences,\n  will be deleted and may need to be recreated.\n<\/p>","pages.privacy.parts.i0":"<h2 class=\"h2\">Security of Personal Data<\/h2>","pages.privacy.parts.i1":"<p>\n  We are committed to protecting the security of your personal data. We use a variety of security technologies and\n  procedures to help protect your personal data from unauthorized access, use or disclosure. When we transmit personal\n  data over the Internet, we protect it through the use of encryption.\n<\/p>","pages.privacy.parts.i2":"<p>\n  We would like to assure you that our employees and co-workers who process your personal data are required to maintain\n  confidentiality about your personal data and about security measures whose disclosure could compromise the security\n  of your personal data.\n<\/p>","pages.privacy.parts.i3":"<p>Without your approval, your personal data will not be shared with any 3rd party.<\/p>","pages.privacy.parts.j0":"<h2 class=\"h2\">Where We Store and Process Personal Data<\/h2>","pages.privacy.parts.j1":"<p>\n  We store and process personal data exclusively in the European Economic Area or in countries, which guarantee a level\n  of protection that meet the requirements of the European Commission.\n<\/p>","pages.privacy.parts.k0":"<h2 class=\"h2\">Preview Releases<\/h2>","pages.privacy.parts.k1":"<p>\n  Our company offers preview, insider, beta or other pre-release {{ appName }} and features (\"previews\") to\n  enable you to evaluate them while providing feedback, including performance and usage data, to our company. As a\n  result, previews can automatically collect additional data, provide fewer controls, and otherwise employ different\n  privacy and security measures than those typically present in our products. If you participate in previews, we may\n  contact you about your feedback or your interest in continuing to use the product after general release.\n<\/p>","pages.privacy.parts.l0":"<h2 class=\"h2\">Changes to This Privacy Policy<\/h2>","pages.privacy.parts.l1":"<p>\n  We will update this privacy statement when necessary to reflect changes in {{ appName }}. When we post changes\n  to this statement, we will revise the \"last updated\" date at the top of the statement. If there are material changes\n  to the statement or in how we will use your personal data, we will notify you either by prominently posting a notice\n  of such changes before they take effect or by directly sending you a notification.\n<\/p>","pages.about.title":"About","pages.about.parts.a":"<p>\n  {{ appName }} is a modern application for urban cyclists. It finds the best routes through the city given\n  your detailed requirements and increases the joy during the ride.\n<\/p>","pages.about.parts.b":"<p>\n  To make things easier, the mobile app {{ appName }} guides you with step-by-step voice navigation. It also\n  finds you a new route if you get off the current route to discover new places -- you will never get lost again.\n  Furthermore, you can use the app to submit community reports to warn other cyclists and the authorities about\n  dangerous places. The competitive riders can use the app to compare themselves with their friends who is cycling\n  more through the {{ city }}.\n<\/p>","pages.about.parts.c":"<p>\n  Application {{ appName }} is developed for the {{ clientName }} by Umotional s.r.o.\n<\/p>","pages.about.parts.d":"<p>\n  Contact: <a href=\"mailto:{{ contactEmail }}\">{{ contactEmail }}<\/a>\n<\/p>","pages.about.parts.e":"<p>\n  As one of the data sources, {{ appName }} uses OpenStreetMap maps, a collaborative project to create a free\n  editable map of the world based on the Open Database License.\n<\/p>","pages.about.parts.f":"<p style=\"font-style: italic;\">\n  Routes have information purposes only. Due to road works, current traffic, weather, and other events the real\n  conditions on the route can differ from those suggested by the application. Use your judgment, be careful and follow\n  road signs and other warnings. It is completely your responsibility that you follow traffic rules and ride safe.\n<\/p>","pages.terms.title":"Terms of Service","pages.terms.parts.since":"<p><em>Valid from {{ validFrom }}.<\/em><\/p>","pages.terms.parts.a1":"<p>\n  The {{ appName }} websites, related mobile applications and services (collectively, the \u201cServices\u201d) are made available to you by Umotional s.r.o., B\u011blehradsk\u00e1 858\/23, 120 00 Praha 2, Czech Republic, subject to these Terms of Service (the \u201cTerms\u201d) and in accordance with the {{ appName }} Privacy Policy (the \u201cPrivacy Policy\u201d). More information about the Services may be found at urbancyclers.com. BY ACCESSING, USING OR UPLOADING OR DOWNLOADING ANY INFORMATION OR MATERIALS TO OR FROM THE SERVICES, OR BY INDICATING YOUR ASSENT TO THESE TERMS BY CREATING AN ACCOUNT, CLICKING \u201cSIGN IN\u201d OR ANY SIMILAR MECHANISM, YOU ARE AGREEING TO THESE TERMS. IF YOU DO NOT AGREE TO THE THESE TERMS, DO NOT ACCESS OR USE THE SERVICES.\n<\/p>","pages.terms.parts.b0":"<h2 class=\"h2\">Registration and Accounts<\/h2>","pages.terms.parts.b1":"<p>\n  The Services are intended solely for persons who are 15 years old or such higher age required in your country to use the Services. If you are under the legal age to form a binding contract in your jurisdiction, you represent that your parent or legal guardian has reviewed and agreed to these Terms on your behalf.\n<\/p>","pages.terms.parts.b2":"<p>\n  To use some of the Services, you must register. You agree to provide true, accurate, current and complete information about yourself (\u201cMember Data\u201d) and maintain and promptly update the Member Data. You agree that {{ appName }} may use your Member Data to provide Services that you access or use and as otherwise set forth in these Terms. If you provide any Member Data that is inaccurate or not current, or {{ appName }} has reasonable grounds to suspect that such Member Data is inaccurate or not current, {{ appName }} has the right to suspend or terminate your account and refuse current or future use of the Services. In consideration of your use of the Services, you represent that you are not a person barred from receiving services under the laws of any applicable jurisdiction.\n<\/p>","pages.terms.parts.b3":"<p>\n  You are solely responsible for maintaining the confidentiality of the password associated with your account and for restricting access to your password, your computer and mobile device while logged into the Services. You accept responsibility for all activities that occur under your account or from your computer and mobile devices. We endeavor to use reasonable security measures to protect against unauthorized access to your account. We cannot, however, guarantee absolute security of your account, your Content (as defined below) or the personal information you provide, and we cannot promise that our security measures will prevent third-party \u201chackers\u201d from illegally accessing the Services or its contents. You agree to immediately notify {{ appName }} of any unauthorized use of your account or password, or any other breach of security, and confirm that you understand all risks of unauthorized access to Member Data and any other information or content you provide to {{ appName }}.\n<\/p>","pages.terms.parts.b4":"<p>\n  You may register for or log-in to your account via a third-party network, such as Facebook or Google. If you do so, you hereby authorize {{ appName }} to pre-populate the registration and other relevant information fields of your account and\/or to use such third-party credentials to log you into your account. If you connect your account to a third-party network, you agree to comply with the terms and conditions and policies applicable to such third party.\n<\/p>","pages.terms.parts.c0":"<h2 class=\"h2\">Paid Services<\/h2>","pages.terms.parts.c1":"<p>\n  If you choose to subscribe to any of our enhanced, paid services, these are the payment and billing terms that apply. Paid subscription automatically renews unless auto-renew is turned off at least 24-hours before the end of the current period. You may cancel at any time.\n<\/p>","pages.terms.parts.c2":"<p>\n  The fees for the subscription needs to be paid through a third party (iTunes App store or Google Play) in accordance with their respective terms of use, privacy policy, and\/or any applicable payment terms and conditions. If you provide your payment information, you authorize respective third party service provider to receive, store and encrypt your payment information. In no event will Cyclers be responsible for the actions or inactions of any third party payment processor, including, but not limited to, system downtime or payment service outages.\n<\/p>","pages.terms.parts.c3":"<p>\n  To manage subscriptions created via Google Play please follow the steps in this guide from Google Play. To manage subscriptions created via iTunes App Store please follow the steps in this guide from Apple\n<\/p>","pages.terms.parts.c4":"<p>\n  Our fees are subject to different subscription plans, gift plans and promotions, and we therefore reserve the right to update our fees from time to time. You acknowledge that, if we change the fees, this will not affect your existing subscription fee, therefore, if you have signed up for a subscription at a certain fee, any fee changes will not affect any current subscription or any renewals.\n<\/p>","pages.terms.parts.d0":"<h2 class=\"h2\">Cancellation<\/h2>","pages.terms.parts.d1":"<p>\n  You may cancel your subscription at any time through the Google Play (guide) or iTunes App store (guide). The cancellation of the subscription will go into effect at the end of your current billing cycle. When your subscription ends, your account will remain and become a free membership. You can renew your subscription at any time without opening a new account, although the subscription fees may have increased. You can delete your account at any time.\n<\/p>","pages.terms.parts.db0":"<h2 class=\"h2\">Mobile Apps<\/h2>","pages.terms.parts.db1":"<p>\n  You should be aware that there are certain things that {{ appName }} will not take responsibility for. Certain functions of the app will require the app to have an active internet connection and GPS location. The connection can be Wi-Fi, or provided by your mobile network provider, but {{ appName }} cannot take responsibility for the app not working at full functionality if you don\u2019t have access to Wi-Fi, and you don\u2019t have any of your data allowance left.\n<\/p>","pages.terms.parts.db2":"<p>\n  If you\u2019re using the app outside of an area with Wi-Fi, you should remember that your terms of the agreement with your mobile network provider will still apply. As a result, you may be charged by your mobile provider for the cost of data for the duration of the connection while accessing the app, or other third party charges. In using the app, you\u2019re accepting responsibility for any such charges, including roaming data charges if you use the app outside of your home territory (i.e. region or country) without turning off data roaming. If you are not the bill payer for the device on which you\u2019re using the app, please be aware that we assume that you have received permission from the bill payer for using the app.\n<\/p>","pages.terms.parts.db3":"<p>\n  Along the same lines, {{ appName }} cannot always take responsibility for the way you use the app i.e. You need to make sure that your device stays charged \u2013 if it runs out of battery and you can\u2019t turn it on to avail the Service, {{ appName }} cannot accept responsibility.\n<\/p>","pages.terms.parts.db4":"<p>\n  It\u2019s your responsibility to keep your phone and access to the app secure. We therefore recommend that you do not jailbreak or root your phone, which is the process of removing software restrictions and limitations imposed by the official operating system of your device. It could make your phone vulnerable to malware\/viruses\/malicious programs, compromise your phone\u2019s security features and it could mean that the {{ appName }} app won\u2019t work properly or at all.\n<\/p>","pages.terms.parts.e0":"<h2 class=\"h2\">Accuracy<\/h2>","pages.terms.parts.e1":"<p>\n  Some of the Services are aimed at tracking your physical movements (\u201cActivity Tracking Services\u201d). These Activity Tracking Services rely on sensors and\/or GPS functionality that track your movement. The data and information provided by the Activity Tracking Services are intended to be a representation of your activity, but may not be completely accurate, including with respect to speed, distance, or calorie data. By using Activity Tracking Services, you acknowledge and agree that {{ appName }} is not responsible or liable for any inaccuracy in such data.\n<\/p>","pages.terms.parts.f0":"<h2 class=\"h2\">Copyright and Ownership<\/h2>","pages.terms.parts.f1":"<p>\n  {{ appName }} own the intellectual property rights to any and all protectable components of the Services, including but not limited to the name of the Services, artwork and end-user interface elements contained within the Services, and many of the individual features. You may not copy, modify, adapt, reproduce, distribute, reverse engineer, decompile, or disassemble any aspect of the Services. {{ appName }} claims no intellectual property rights over the Content you upload or provide to the Service.\n<\/p>","pages.terms.parts.g0":"<h2 class=\"h2\">User Generated Content<\/h2>","pages.terms.parts.g1":"<p>\n  The User agrees not to publish any content (mainly in the form of text, photos, video, graphics) on the {{ appName }} app that is unlawful, in particular racist, pornographic, offensive or defamatory or violates third party rights, in particular violates copyrights. Accordingly, the user is fully responsible for all content that they published and distributed with the {{ appName }} app.\n<\/p>","pages.terms.parts.g2":"<p>\n  In case a user is advised that the content uploaded to the {{ appName }} app by them may be violating law and\/or these terms of use, they shall immediately remove this content from the {{ appName }} app. In case Umotional obtains evidence that the user publishes any objectionable content that may be violating law and\/or these terms of use, Umotional is entitled to remove such objectionable content from the {{ appName }} app without notice to the affected and\/or to exclude (possibly) illegal behaving users from using the services of the {{ appName }} app.\n<\/p>","pages.terms.parts.g3":"<p>\n  The User understands that the User, and not Umotional, is entirely responsible for all content they upload, post, email, transmit or otherwise make available via the {{ appName }}. The User agrees that Umotional is not responsible for, and does not endorse, content posted in the {{ appName }}. Umotional does not guarantee the accuracy, integrity or quality of user generated content available in the {{ appName }}. The user understands that by using the {{ appName }}, they may be exposed to content that is offensive, indecent or objectionable. Under no circumstances will Umotional be liable in any way for any content, including, but not limited to, any errors or omissions in any content, or any loss or damage of any kind incurred as a result of the use of any content made available in the {{ appName }}. You agree to bear all risks associated with the use of any content available in connection with the {{ appName }}, including any reliance on the accuracy, completeness, or usefulness of such content.\n<\/p>","pages.terms.parts.h0":"<h2 class=\"h2\">Careful selection of a route by the User<\/h2>","pages.terms.parts.h1":"<p>\n  The User is aware that they have to make a careful decision in terms of their personal skills and equipment as well as the prevailing weather and traffic conditions whether, and if so, which routes provided by the {{ appName }} they select from for their activities. Accordingly Umotional takes no responsibility or liability for that:\n<\/p>","pages.terms.parts.h2":"<ol>\n  <li>the User has a sufficient (physical) capability to ride the route selected by them;<\/li>\n  <li>the User equipment is suitable for the commission or the riding of their chosen route;<\/li>\n  <li>weather and traffic conditions are suitable to commit or to ride the route selected by the User without a significant risk exposure for the life, body and health of the user.<\/li>\n<\/ol>","pages.terms.parts.i0":"<h2 class=\"h2\">Third Parties<\/h2>","pages.terms.parts.i1":"<p>\n  Third party products and services made available on the Services are made and offered directly by the applicable third party. When you pursue or purchase any such product or service, you acknowledge that you are contracting directly with such third party and not with {{ appName }}. Your interaction with, or participation in promotions of, third parties found on or through the Services, including payment and delivery of goods or services, and any other terms, are solely between you and such third party. You are not obligated to use or transact business with any third party that appears on the Services. YOU AGREE THAT CYCLERS SHALL NOT BE LIABLE FOR ANY LOSS OR DAMAGES OF ANY KIND INCURRED BY YOU AS THE RESULT OF ANY OF YOUR DEALINGS WITH THIRD PARTY SERVICE PROVIDERS OR ADVERTISERS AVAILABLE THROUGH THE SERVICES.\n<\/p>","pages.terms.parts.i2":"<p>\n  As one of the data sources, {{ appName }} uses OpenStreetMap maps, a collaborative project to create a free editable map of the world based on the Open Database License. Suggested routes have information purposes only. Due to road works, current traffic, weather, and other events the real conditions on the route can differ from those suggested by the application. Use your judgment, be careful and follow road signs and other warnings. It is completely your responsibility that you follow traffic rules and ride safe.\n<\/p>","pages.terms.parts.i3":"<p>\n  {{ appName }} or third parties may provide links to other internet sites or resources through the Services. {{ appName }} does not endorse and is not responsible or liable for any content, information, advertising, products or other materials on or available from such sites or resources. You acknowledge and agree that {{ appName }} is not responsible for the availability of such external sites or resources.\n<\/p>","pages.terms.parts.j0":"<h2 class=\"h2\">Disclaimer<\/h2>","pages.terms.parts.j1":"<p>\n  The materials within {{ appName }} are provided on an 'as is' basis. {{ appName }} makes no warranties, expressed or implied, and hereby disclaims and negates all other warranties including, without limitation, implied warranties or conditions of merchantability, fitness for a particular purpose, or non-infringement of intellectual property or other violation of rights. Further, {{ appName }} does not warrant or make any representations concerning the accuracy, likely results, or reliability of the use of the Services.\n<\/p>","pages.terms.parts.k0":"<h2 class=\"h2\">Limitations<\/h2>","pages.terms.parts.k1":"<p>\n  In no event shall {{ appName }} be liable for any damages (including, without limitation, damages for loss of data or profit, or due to business interruption) arising out of the use or inability to use the Services, even if Umotional, s.r.o. or a Umotional, s.r.o. authorized representative has been notified orally or in writing of the possibility of such damage. {{ appName }} accepts no liability for any loss, direct or indirect, you experience as a result of relying wholly on the functionality of the Services. Because some jurisdictions do not allow limitations on implied warranties, or limitations of liability for consequential or incidental damages, these limitations may not apply to you.\n<\/p>","pages.terms.parts.l0":"<h2 class=\"h2\">Updates of the Services<\/h2>","pages.terms.parts.l1":"<p>\n  {{ appName }} and its third party service providers may make improvements and\/or changes in the Services, products, services, mobile applications, features, programs, and prices described at any time and for any reason in its sole discretion. {{ appName }} reserves the right at any time to modify or discontinue, temporarily or permanently, the Services or any portion thereof with or without notice. You agree that {{ appName }} shall not be liable to you or to any third party for any modification, suspension or discontinuance of the Services.\n<\/p>","pages.terms.parts.l2":"<p>\n  The mobile application may download and install upgrades, updates and additional features in order to improve, enhance, and further develop the Services. The app is currently available on Android & iOS \u2013 the requirements for both systems (and for any additional systems we decide to extend the availability of the app to) may change, and you\u2019ll need to download the updates if you want to keep using the app. {{ appName }} do not promise that they will always update the app so that it is relevant to you and\/or works with the Android & iOS version that you have installed on your device. However, you promise to always accept updates to the application when offered to you, We may also wish to stop providing the app, and may terminate use of it at any time without giving notice of termination to you.\n<\/p>","pages.terms.parts.m0":"<h2 class=\"h2\">Modification of the Terms<\/h2>","pages.terms.parts.m1":"<p>\n  We will update the Terms when necessary to reflect changes in {{ appName }}. When we post changes to the Terms, we will revise the \"last updated\" date at the top of the Terms. If there are material changes to the Terms, we will notify you either by prominently posting a notice of such changes before they take effect or by directly sending you a notification. By continuing to access or use the Services after we have provided you with notice of a modification, you are agreeing to be bound by the modified Terms. If the modified Terms are not acceptable to you, your only recourse is to cease using the Services.\n<\/p>","pages.terms.parts.n0":"<h2 class=\"h2\">Governing Law<\/h2>","pages.terms.parts.n1":"<p>\n  These terms and conditions are governed by and construed in accordance with the laws of the Czech Republic and you irrevocably submit to the exclusive jurisdiction of the courts in that location.\n<\/p>","pages.terms.parts.o0":"<h2 class=\"h2\">Support and Questions<\/h2>","pages.terms.parts.o1":"<p>\n  If you have a question or a concern regarding these Terms or the Services, please contact us by using email {{ contactEmail }}. We will respond within 30 days.\n<\/p>","cookies.consent_modal.title":"We use cookies","cookies.consent_modal.description":"Hello, this website uses essential cookies to ensure its proper operation and tracking cookies to understand how you interact with it. The latter will be set only after consent. <button type=\"button\" data-cc=\"c-settings\" class=\"cc-link\">Let me choose<\/button>","cookies.consent_modal.primary_btn":"Accept all","cookies.consent_modal.secondary_btn":"Reject all","cookies.settings_modal.title":"Cookie preferences","cookies.settings_modal.save_settings_btn":"Save settings","cookies.settings_modal.accept_all_btn":"Accept all","cookies.settings_modal.reject_all_btn":"Reject all","cookies.settings_modal.close_btn_label":"Close","cookies.settings_modal.cookie_table_headers.col1":"Name","cookies.settings_modal.cookie_table_headers.col2":"Domain","cookies.settings_modal.cookie_table_headers.col3":"Expiration","cookies.settings_modal.cookie_table_headers.col4":"Description","cookies.settings_modal.blocks.0.title":"Cookie usage \ud83d\udce2","cookies.settings_modal.blocks.0.description":"We use cookies to ensure the basic functionalities of the website and to enhance your online experience. You can choose for each category to opt-in\/out whenever you want. For more details relative to cookies and other sensitive data, please read the full <a target=\"_blank\" href=\"{{ wwwroot }}\/privacy\/\" class=\"cc-link\">privacy policy<\/a>.","cookies.settings_modal.blocks.1.title":"Strictly necessary cookies","cookies.settings_modal.blocks.1.description":"These cookies are essential for the proper functioning of my website. Without these cookies, the website would not work properly.","cookies.settings_modal.blocks.2.title":"Performance and Analytics cookies","cookies.settings_modal.blocks.2.description":"These cookies allow the website to remember the choices you have made in the past.","cookies.settings_modal.blocks.2.cookie_table.0.col3":"2 years","cookies.settings_modal.blocks.2.cookie_table.1.col3":"1 day","cookies.settings_modal.blocks.3.title":"Advertisement and Targeting cookies","cookies.settings_modal.blocks.3.description":"These cookies collect information about how you use the website, which pages you visited and which links you clicked on. All of the data is anonymized and cannot be used to identify you.","cookies.settings_modal.blocks.4.title":"More information","cookies.settings_modal.blocks.4.description":"For any queries in relation to our policy on cookies and your choices, please <a target=\"_blank\" class=\"cc-link\" href=\"{{ wwwroot }}\/terms\">contact us<\/a>.","share_title":"Na kole Prahou | Planner","menu.tips":"Cycling tips","menu.about":"About","menu.other":"Other projects","menu.contribute":"Contribute"};;
/* File:  user-profile.vue*/

Vue.component('user-profile', {
    template: `
    <div v-if="params.components.userWidget" class="_user-wrapper float-right relative" ref="wrapper">
        <div class="_user pointer" v-on:click="onclick">
            <span class="float-left" id="user-picture">
                <img src="https://www.gravatar.com/avatar" data-default-src="https://www.gravatar.com/avatar" alt="User's profile picture" class="pure-img _pic make-circle" />
            </span>
            <span class="float-left _name" id="user-name">{{ language['user.anonymous'] }}</span>
            <i class="fa fa-caret-down"></i>
        </div>
        <span class="_logout pointer absolute hidden" v-on:click="logout();" id="logout">
            <img :src="params.wwwroot + '/v2.5/img/logout.svg'" alt="Logout" :title="language['login.logout']" />
        </span>
        <div class="_popup _user-menu" :class="{hidden: ! menuVisible}">
            <div class="left">
                <ul class="links">
                    <li class="link">
                        <a :href="params.wwwroot + '/import/'">Import data</a>
                    </li>
                    <li class="link">
                        <a :href="params.wwwroot + '/my-account/'">My account</a>
                    </li>
                    <li v-if="params.components.graphEdit" class="link hidden">
                        <a href="#" v-on:click="graphEdit()"><i class="fa fa-pencil"></i> Graph edit</a>
                    </li>
                    <li class="link">
                        <a href="#" v-on:click="logout">Log out</a>
                    </li>
                    <li class="separator">
                    </li>
                    <li class="link">
                        <a :href="params.wwwroot + '/terms/'">Terms of use</a>
                    </li>
                    <li class="link">
                        <a :href="params.wwwroot + '/privacy/'">Privacy policy</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    `,
    data: function () {
        return {
            language: language,
            userLevel: parameters.userLevel,
            params: parameters,
            lang: parameters.lang,
            menuVisible: false,
            win: window
        }
    },
    mounted() {
        dataStorage.data.userProfile = this;

        const self = this;
        document.body.addEventListener('click', ev => {
            var clickedWrapper = false;
            var clickedMenu = false;

            ev.path.forEach(el => {
                if (el.classList && el.classList.contains('_user-menu')) {
                    clickedMenu = true;
                } // end if
                if (el.classList && el.classList.contains('_user-wrapper')) {
                    clickedWrapper = true;
                } // end if
            });

            if ( ! clickedMenu && ! clickedWrapper) {
                self.closeMenu();
            } // end if
        });
    },
    methods: {
        graphEdit() {
            window.graphEditor.initialize();
            this.closeMenu();
        },
        onclick() {
            if (this.$refs.wrapper.classList.contains('_has-user')) {
                this.toggleMenu();
            } else {
                this.showModal();
            }
        },
        showModal() {
            show_modal('modal--login');
        },
        toggleMenu() {
            this.menuVisible = ! this.menuVisible;
        },
        openMenu() {
            this.menuVisible = true;
        },
        closeMenu() {
            this.menuVisible = false;
        },
        logout() {
            logout();
        },
        hasUser() {
            return this.$refs.wrapper.classList.contains('_has-user');
        },
        isAdmin() {
            return window.randBool;
        },
        getUser() {
            return this.win.__currentFirebaseUser;
        }
    }
});;

/* File:  trip-panel.vue*/

Vue.component('trip-panel', {
    template: `
    <div id="trip-panel" :class="{hidden: ! display}" class="trip-panel">
        <div class="trip-panel-inner" v-if="this.trip">
            <div class="one-trip-v2">
                <div class="trip-controls">
                    <a v-on:click="openModal" class="pointer trip-back" href="#"><i class="fa fa-angle-left"></i> {{ language['planner.trip.back'] }}</a>
                    <a v-on:click="cancelTrip" class="pointer trip-close" href="#"><i class="fa fa-times"></i></a>
                </div>
                <div class="col-xs-12 text-center">
                    <img class="trip-img" :src="trip.photoUrl" :alt="trip.name" onerror="this.onerror = null; this.style.visibility = 'hidden';" />
                </div>
                <div class="col-xs-12" style="margin-bottom: 10px;">
                    <div class="trip-heading">{{ trip.name }}</div>
                    <div class="trip-lead">{{ (trip.lengthInMeters/1000).toFixed(0) }} km, {{ trip.characteristic }}</div>
                </div>

                <div class="trip-desc col-xs-12" v-if="detail && false">
                    <p v-html="detail.description"></p>
                </div>
                <div class="col-xs-12">
                    <button class="btn btn-block btn-primary" v-on:click="plan">
                        {{ language['planner.trip.plan'] }}
                    </button>
                </div>
            </div>
            
        </div>
    </div>
    `,
    mounted: function(){
        dataStorage.data.tripPanel = this;
    },
    data: function () {
        return {
            language: language,
            display: false,
            trip: null,
            dataStorage: window.dataStorage,
            win: window,
            detail: null,
            route: null,
            routeBorder: null,
        }
    },
    methods: {
        isActive() {
            return this.display ? true : false;
        },
        pick(trip, autoselect = false) {
            this.trip = trip;
            this.display = true;
            this.dataStorage.data.tripBtn.trip = this.trip;
            this.detail = null;
            this.fetchDetail(autoselect);
        },
        close() {
            this.display = false;
        },
        openModal() {
            this.dataStorage.data.tripModal.display = true;
        },
        cancelTrip() {
            this.display = false;
            this.trip = null;
            this.dataStorage.data.tripBtn.trip = null;

            this.removeLastRoute();
        },
        removeLastRoute() {
            if(this.route) this.route.remove();
            if(this.routeBorder) this.routeBorder.remove();
        },
        fetchDetail(autoselect = false) {
            this.removeLastRoute();
            
            const that = this;
            const center = this.win.mapboxMap.getCenter();
            axios.get(`/trips/${center.lat}/${center.lng}/${this.trip.id}/`).then(function (res) {
                that.detail = res.data;

                // L.layerGroup()
                let geoData = JSON.parse(that.detail.trajectoryAsGeoJson);
                let latLngs = [];
                for (let i = 0; i < geoData.coordinates.length; i++) {
                    const coords = geoData.coordinates[i];
                    latLngs.push(new L.LatLng(coords[1], coords[0]));
                } // end for

                let opts = { color: TRIP_PLAN_COLOR, weight: ROUTE_WEIGHT, };
                let borderOpts = { color: '#666666', weight: ROUTE_WEIGHT + 8, };

                let border = L.polyline(latLngs, borderOpts);
                let layer = L.polyline(latLngs, opts);
                
                border.addTo(that.win.mapboxMap);
                layer.addTo(that.win.mapboxMap);

                that.win.mapboxMap.fitBounds(layer.getBounds(), {paddingTopLeft: [650, 0]});

                that.route = layer;
                that.routeBorder = border;

                if (autoselect) {
                    that.plan();
                } // end if
            });
        },
        plan() {
            const that = this;

            that.win.router.semaphore = 'RED';
            while (that.win.markers.length > 2) {
                that.win.markers[0].remove();
            } // end while

            // FIXME: This should be easier?!
            
            dataStorage.data.journeyTypeSwitch.$refs.select.value = 'poi';
            // dataStorage.data.journeyTypeSwitch.mode = 'poi';
            // document.body.classList.remove('only-origin');
            that.dataStorage.data.journeyTypeCircuit.length = 0;
            
            // FIXME: lil hack
            setTimeout(() => {
                if (!that.win.markers[0] || !that.win.markers[0].getLatLng()) {
                    that.win.markers[0].setLatLng(L.latLng(that.detail.tripOrigin.lat, that.detail.tripOrigin.lon), true, null, null, true);    
                } // end if
                
                that.win.router.semaphore = 'GREEN';
                
                that.win.markers[1].setLatLng(L.latLng(that.detail.tripDestination.lat, that.detail.tripDestination.lon), true, null, null, false);
            }, 100);
        }
    }
});;

/* File:  trip-modal.vue*/

Vue.component('trip-modal', {
    template: `
    <div id="trip-modal" class="trip-modal modal-hide-footer" :class="{fetching: fetching}">
        <modal v-if="display" v-on:close="display = false">
            <div slot="header">
                <b>What would you like to visit?</b>
            </div>
            <div slot="body">
                <div class="col-xs-12">
                    <div class="trip-list">
                        <span class="trip-spinner"><i class="fa fa-refresh fa-spin"></i></span>
                        <div v-for="trip in trips" class="one-trip-v2" v-on:click="showDetail(trip, trip.active);" :class="(undefined !== trip.active && true === trip.active) ? 'active' : ''">
                            <div class="col-xs-2 text-center">
                                <img class="trip-img" :src="trip.photoUrl" :alt="trip.name" onerror="this.onerror = null; this.style.visibility = 'hidden';" />
                            </div>
                            <div class="col-xs-10">
                                <div class="trip-heading">{{ trip.name }}</div>
                                <div class="trip-lead">{{ (trip.lengthInMeters/1000).toFixed(0) }} km, {{ trip.characteristic }}</div>
                            </div>

                            <div v-if="trip.active" class="flex-break"></div>
                            <div v-if="trip.active">
                                <div class="trip-desc col-xs-12" v-if="detail">
                                    <p v-html="detail.description"></p>
                                </div>
                            </div>
                            <div v-if="trip.active" class="flex-break"></div>
                            <div v-if="trip.active">
                                <div class="col-xs-12 trip-btns" v-if="detail">
                                    <button class="btn btn-sm btn-default pointer" v-on:click.prevent="pick(trip, false)">{{ language['planner.trip.preview'] }}</button>
                                    <button class="btn btn-sm btn-primary pointer" v-on:click.prevent="pick(trip, true)">{{ language['planner.trip.plan'] }}</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                
            </div>
            <div slot="footer">
                <p class="text-center">
                    
                </p>
            </div>
            <span slot="button">
                Continue
            </span>
        </modal>
    </div>
    `,
    mounted: function(){
        dataStorage.data.tripModal = this;
    },
    watch: {
        // display: function(newVal) {
        //     if (newVal) {
        //         setTimeout(this.filter, 200);
        //     } // end if
        // },
    },
    data: function () {
        return {
            language: language,
            display: false,
            trips: [],
            win: window,
            detail: null,
            fetching: false,
        }
    },
    methods: {
        open() {
            this.display = true;
            this.fetchTrips();
        },
        fetchTrips: function() {
            var that = this;
            const center = this.win.mapboxMap.getCenter();
            this.fetching = true;
            
            axios.get(`/trips/${center.lat}/${center.lng}/`).then(function (res) {
                that.trips = res.data;
                that.fetching = false;
            });
        },
        showDetail(trip, isClose) {
            const that = this;
            const center = this.win.mapboxMap.getCenter();

            for (let i = 0; i < this.trips.length; i++) {
                if (this.trips[i].id == trip.id) {
                    this.trips[i].active = (isClose ? undefined : true);
                } else {
                    this.trips[i].active = undefined;
                } // end if-else
            } // end for

            if (isClose) {
                return;
            } // end if

            axios.get(`/trips/${center.lat}/${center.lng}/${trip.id}/`).then(function (res) {
                that.detail = res.data;
                that.$forceUpdate();
            });
        },
        pick(trip, autoselect = false) {
            this.display = false;
            this.win.dataStorage.data.tripPanel.pick(trip, autoselect);
        }
    }
});;

/* File:  trip-btn.vue*/

Vue.component('trip-btn', {
    template: `
    <div :class="{hidden: hidden}" class="panel m-b-md panel-trip">
        <div class="row trip">
            <div class="text-center">
                <a v-on:click="openList" class="btn btn-link btn-sm btn-select-trip">
                    <i v-if="!this.trip" class="fa fa-info-circle"></i>
                    {{ this.trip ? language['planner.trip.select_another'] : language['planner.trip.select'] }}
                </a>
            </div>
        </div>
    </div>
    `,
    mounted: function () {
        dataStorage.data.tripBtn = this;
    },
    watch: {
        trip(trip) {
            if (this.win.parameters.components.trips) {
                dataStorage.data.tripBtn.hidden = trip;    
            } // end if
            
            // if (trip) {
            //     dataStorage.data.results.compact = true;
            //     dataStorage.data.plannerUi.recalculateOffset();
            // }
        }
    },
    data: function () {
        return {
            language: language,
            hidden: ! window.parameters.components.trips,
            dataStorage: window.dataStorage,
            win: window,
            trip: null,
        }
    },
    methods: {
        openList() {
            this.dataStorage.data.tripModal.open();
        } 
    }
});
;

/* File:  tooltip-modal.vue*/

Vue.component('tooltip-modal', {
    template: `
    <div id="tooltip-modal">
        <modal v-if="display" v-on:close="display = false" class="tooltip-modal">
            <div slot="header">
                <b>{{ heading }}</b>
            </div>
            <div slot="body">
                <div v-html="body">
                </div>
            </div>
        </modal>
    </div>
    `,
    mounted: function(){
        dataStorage.data.tooltipModal = this;
    },
    data: function () {
        return {
            language: language,
            display: false,
            heading: 'Tooltip heading',
            body: 'Tooltip body',
        }
    },
    methods: {
        
    }
});;

/* File:  toggle-btn.vue*/

Vue.component('toggle-btn', {
    template: `
    <div class="toggle-btn text-center hidden">
        <a class="btn btn-link btn-sm pointer" v-on:click="toggle">
            {{ language['planner.toggle'] }}
            <img src="/v2.5/img/resources/menu-down.svg" alt="Arrow" class="arrow-down" />
            <img src="/v2.5/img/resources/menu-up.svg" alt="Arrow" class="arrow-up" />
        </a>
    </div>
    `,
    mounted: function(){
        dataStorage.data.toggleBtn = this;
    },
    data: function () {
        return {
            language: language,
            dataStorage: window.dataStorage,
        }
    },
    methods: {
        toggle: function(){
            dataStorage.data.panel.minimized = ! dataStorage.data.panel.minimized;
            if ( ! dataStorage.data.panel.minimized ) {
                dataStorage.data.panel.$refs.panel.scrollTop = 0;
            }
        }
    }
});;

/* File:  start.vue*/

Vue.component('start', {
    template: ''
});;

/* File:  spinner.vue*/

Vue.component('spinner', {
    template: `
    <div id="spinner" :class="{ hidden: hidden }">
        <div class="inner">
            <i class="fa fa-circle-o-notch slow-spin fa-3x fa-fw"></i>
        </div>
    </div>
    `,
    mounted: function(){
        dataStorage.data.spinner = this;
    },
    data: function(){
        return {
            language: language,
            hidden: true,
        };
    },
    methods: {
        spin: function(duration){
            var that = this;
            duration = undefined == duration ? 500 : duration;
            this.hidden = false;
            setTimeout(function(){
                that.hidden = true;
            }, duration);
        },
        show: function(){
            this.hidden = false;
        },
        hide: function(){
            this.hidden = true;
        }
    }
});;

/* File:  settings-panel.vue*/

Vue.component('settings-panel', {
    template: `
    <div v-if="'expert' == userLevel || 'admin' == userLevel" id="settings-panel" class="panel m-b-md">
        <div class="row no-gutter" id="backendSelector">
            <label for="backendUrl" class="col-sm-6 control-label p-h-xs">Backend URL</label>
            <div class="col-sm-6">
                <select id="backendUrl" class="form-control">
                    <option value="http://localhost:8080/v3/directions">Localhost</option>
                    <option value="http://localhost:8080/v4/directions">Localhost V4</option>
                    <option value="http://147.32.83.25/urbancyclers-api/v3/directions">Mercury Test</option>
                    <option value="http://147.32.83.25/urbancyclers-api-expert/v3/directions">
                        Mercury Expert
                    </option>
                    <option value="https://uc1.umotional.net/urbancyclers-api/v3/directions">Earth Production
                    </option>
                    <option value="https://uc1.umotional.net/urbancyclers-api/v4/directions">Earth V4
                    </option>

                    <option value="https://test.umotional.net/urbancyclers-api/v3/directions">
                        Pluto Test
                    </option>
                    <option value="https://test.umotional.net/urbancyclers-api/v4/directions" selected="selected">
                        Pluto V4 Test
                    </option>

                </select>
            </div>

        </div>

        <div class="row no-gutter p-h-xs" id="bikesharingSelector">

            <label for="bikesharingCompanry" class="col-sm-6 control-label p-h-xs">Bikesharing Comp</label>
            <div class="col-sm-6">
                <select id="bikesharingCompanry" class="form-control">
                    <option value="NONE">---</option>
                    <option value="REKOLA">Rekola</option>
                    <option value="CALLABIKE">Callabike</option>
                    <option value="NEXTBIKE">Nextbike</option>
                    <option value="SANTANDER_CYCLES">
                        Santander cycles
                    </option>
                </select>
            </div>

        </div>


        <div class="row no-gutter p-h-xs" id="numOfWaypointsSelector">

            <label for="numOfWaypoints" class="col-sm-6 control-label p-h-xxs">Number of Waypoints</label>
            <div class="col-sm-6">
                <input type="number" id="numOfWaypoints" class="form-control" min="0" max="10" value="3">
            </div>

        </div>
    </div>
    `,
    data: function () {
        return {
            userLevel: parameters.userLevel
        }
    },
});;

/* File:  selected-plan-panel.vue*/

Vue.component('selected-plan-panel', {
    template: `
    <div id="selected-plan-panel"
         class="panel m-b-md" :class="{ hidden: 'expert' != userLevel }">
        <div class="row no-gutter">

            <div class="col-xs-9 ">
                <span>Resp: <strong id="responseId"></strong> PlanId: <strong id="planId"></strong></span>
            </div>

            <div class="col-xs-3 text-right">
                <button id="repLink" class="btn btn-default btn-sm" type="button" title="Report"
                        onclick="openReport()">Report &gt;&gt;
                </button>
            </div>
        </div>

    </div>
    `,
    data: function () {
        return {
            userLevel: parameters.userLevel
        }
    },
});;

/* File:  search-panel.vue*/

Vue.component('search-panel', {
    template: `
    <div id="search-panel" class="panel nopad row no-gutter m-b-md">
        <div class="col-xs-11">
            <div id="search-group">
            </div>
        </div>
        <div class="col-xs-1 ">
            <div class="change-dir-tooltip" id="change-direction-icon-div" data-toggle="tooltip" data-placement="right" style="">
                 <img id="change-direction-icon" src="/v2.5/img/resources/dir.svg" alt="Change direction" class="pointer">
            </div>
        </div>
    </div>
    `
});;

/* File:  routes-panel.vue*/

Vue.component('routes-panel', {
    template: `
    <div id="routes-panel" class="panel nopad m-b-md" style="display: none;"></div>
    `
});
;

/* File:  route-opts.vue*/

Vue.component('route-opts', {
    template: `
    <div class="route-opts panel" :class="{hidden: routeOptsHidden}">
        <a v-on:click="pick('default');" data-option="default" ref="default" class="route-option pointer" :class="{active: opts.default}">
            <img src="/v2.5/img/map--gray.svg" alt="Option icon" class="gray" />
            <img :src="params.branding.images.views.map" alt="Option icon" class="green" />
            <span class="opt-desc">{{ language['planner.planpanels.default'] }}</span>
        </a>
        <a v-if="win.parameters.components.views.transparent" v-on:click="toggleVisibility" data-option="visibility" ref="visibility" class="route-option pointer" :class="{active: ! extra.plansVisible}">
            <img src="/v2.5/img/view--gray.svg" alt="Option icon" class="gray" />
            <img :src="params.branding.images.views.transparent" alt="Option icon" class="green" />
            <span class="opt-desc">{{ language['transport.plan_visibility'] }}</span>
        </a>
        <a v-if="win.parameters.components.views.traffic" v-on:click="pick('stress');" data-option="stress" ref="stress" class="route-option pointer" :class="{active: opts.stress}">
            <img src="/v2.5/img/traffic--gray.svg" alt="Option icon" class="gray" />
            <img :src="params.branding.images.views.traffic" alt="Option icon" class="green" />    
            <span class="opt-desc">{{ language['planner.planpanels.stress'] }}</span>
        </a>
        <a v-if="win.parameters.components.experimental" v-on:click="pick('surface');" data-option="surface" ref="surface" class="route-option pointer" :class="{active: opts.surface}">
            <img src="/v2.5/img/smoothness--gray.svg" alt="Option icon" class="gray" />
            <img src="/v2.5/img/smoothness--green.svg" alt="Option icon" class="green" />
            <span class="opt-desc">{{ language['planner.planpanels.surface'] }}</span>
        </a>
        <a v-if="win.parameters.components.views.surface" v-on:click="pick('surfaceSmoothness');" data-option="surfaceSmoothness" ref="surfaceSmoothness" class="route-option pointer" :class="{active: opts.surfaceSmoothness}">
            <img src="/v2.5/img/road--gray.svg" alt="Option icon" class="gray" />
            <img :src="params.branding.images.views.surface" alt="Option icon" class="green" />
            <span class="opt-desc">{{ language['planner.planpanels.surface'] }}</span>
        </a>
        <a v-if="win.parameters.components.experimental" v-on:click="pick('popularity');" data-option="popularity" ref="popularity" class="route-option pointer" :class="{active: opts.popularity}">
            <img src="/v2.5/img/heart--gray.svg" alt="Option icon" class="gray" />
            <img src="/v2.5/img/heart--green.svg" alt="Option icon" class="green" />
            <span class="opt-desc">{{ language['planner.planpanels.popularity'] }}</span>
        </a>
        <a v-if="win.parameters.components.views.steepness" v-on:click="pick('slope');" data-option="slope" ref="slope" class="route-option pointer" :class="{active: opts.slope}">
            <img src="/v2.5/img/mountain--gray.svg" alt="Option icon" class="gray" />
            <img :src="params.branding.images.views.steepness" alt="Option icon" class="green" />
            <span class="opt-desc">{{ language['planner.planpanels.slope'] }}</span>
        </a>
        <a v-if="win.parameters.components.views.airQuality" v-on:click="pick('airQuality');" data-option="airQuality" ref="airQuality" class="route-option pointer" :class="{active: opts.airQuality}">
            <img src="/v2.5/img/cloud--gray.svg" alt="Option icon" class="gray" />
            <img :src="params.branding.images.views.airQuality" alt="Option icon" class="green" />
            <span class="opt-desc">{{ language['planner.planpanels.airQ'] }}</span>
        </a>
        <a v-if="win.parameters.components.experimental" v-on:click="pick('water');" data-option="water" ref="water" class="route-option pointer" :class="{active: opts.water}">
            <img src="/v2.5/img/sea--gray.svg" alt="Option icon" class="gray" />
            <img src="/v2.5/img/sea--green.svg" alt="Option icon" class="green" />
            <span class="opt-desc">Water proximity</span>
        </a>
        <a v-if="win.parameters.components.experimental" v-on:click="pick('greenery');" data-option="greenery" ref="greenery" class="route-option pointer" :class="{active: opts.greenery}">
            <img src="/v2.5/img/tree--gray.svg" alt="Option icon" class="gray" />
            <img src="/v2.5/img/tree--green.svg" alt="Option icon" class="green" />
            <span class="opt-desc">Greenery proximity</span>
        </a>
    </div>
    `,
    mounted: function(){
        dataStorage.data.routeOpts = this;
    },
    data: function () {
        return {
            language: language,
            opts: {
                default: true,
                stress: false,
                surface: false,
                surfaceSmoothness: false,
                popularity: false,
                slope: false,
                airQuality: false,
                water: false,
                greenery: false,
            },
            routeOptsHidden: true,
            extra: {
                plansVisible: true,
            },
            win: window,
            params: window.parameters,
            // activeIcons: {
            //     map: "/v2.5/img/map--green.svg",
            //     transparent: "/v2.5/img/view--green.svg",
            //     traffic: "/v2.5/img/traffic--green.svg",
            //     surface: "/v2.5/img/road--green.svg",
            //     steepness: "/v2.5/img/mountain--green.svg",
            // }
        }
    },
    methods: {
        pick: function(which){
            this.opts.default = this.opts.stress = this.opts.surface = this.opts.surfaceSmoothness = this.opts.popularity = this.opts.slope = this.opts.airQuality = this.opts.water = this.opts.greenery = false;
            this.opts[which] = true;
            document.querySelector('.route-button.highlight').click();
            dataStorage.data.dynamicLegend.setMode(which);
            
            if (!this.extra.plansVisible) {
                this.win.painter.changeOpacities();
                this.extra.plansVisible = ! this.extra.plansVisible;
            } // end if
        },
        toggleVisibility: function() {
            if (!this.extra.plansVisible) {
                return;
            } // end if

            this.extra.plansVisible = ! this.extra.plansVisible;
            this.opts.default = this.opts.stress = this.opts.surface = this.opts.surfaceSmoothness = this.opts.popularity = this.opts.slope = this.opts.airQuality = false;

            this.win.painter.changeOpacities();
        }
    }
});;

/* File:  results.vue*/

Vue.component('results', {
    template: `
    <div id="results" class="left-block results" :class="{compact: compact}">
        <div class="if-not-compact">
            <routes-panel />
            <selected-plan-panel />
            <!-- FIXME: je videt i pokud nejsou zadne plany -->
            <button v-on:click="toggleCompact" :class="{hidden: ! showToggle}" class="btn btn-link toggle-compact"><i class="fa fa-angle-double-up" aria-hidden="true"></i></button>
        </div>
        <div class="if-compact" v-on:click="toggleCompact">
            <i class="fa fa-map-signs" aria-hidden="true"></i>
        </div>
    </div>
    `,
    mounted: function () {
        dataStorage.data.results = this;
    },
    data: function () {
        return {
            compact: false,
            showToggle: false,
            parameters: window.parameters
        };
    },
    methods: {
        toggleCompact: function() {
            this.compact = ! this.compact;
            dataStorage.data.plannerUi.recalculateOffset();
        },
    },
});;

/* File:  replanner.vue*/

Vue.component('replanner', {
    template: `
    <div v-if="win.parameters.components.experimental && plan" id="replanner" class="panel replanner" :data-mode="mode">
        <a v-on:click="close" class="close" href="#"><i class="fa fa-times" aria-hidden="true"></i></a>
        <button v-on:click="toggleMode();" :class="{active: 'edit' == mode}" class="btn btn-info btn-sm">🎨 Paint markers</button>
        
        <div v-if="'edit' == mode" class="howto small text-justify">
            Click the map to <b>insert</b> a marker. Right-click the marker to <b>remove</b> it.
        </div>
        <div v-if="null == mode" class="howto small text-justify">
            Click <b>Paint markers</b> to start.
        </div>
        
        <label class="form-check-label" for="stickToPlan" :class="{disabled: ! hasMarkers()}">
            <input :class="{disabled: ! hasMarkers()}" type="checkbox" class="form-check-input" id="stickToPlan" ref="stickToPlan">
            Stick to plan
        </label>

        <button v-on:click="replan" class="btn btn-success btn-sm" :class="{disabled: ( ! hasMarkers() || loading ) }">
            Re-plan
            <i class="fa fa-cog replanning-loader" :class="{'fa-spin': loading}" aria-hidden="true"></i>
        </button>
        <button v-on:click="openModal" class="btn btn-link btn-sm">
            Import request
        </button>
        <hr />
        <div class="replan-legend relative">
            <span class="item" style="background-color: rgb(241,161,104);">Original route</span>
            <span class="item" style="background-color: rgb(241,210,71);">User route</span>
            <span class="item" style="background-color: #74c476;">New route</span>
            <i class="fa fa-question-circle text-right" style="display: block; opacity: .5; position: absolute; right: 0; top: -18px;" aria-hidden="true"></i>
        </div>
        <hr />
        <button v-on:click="reset" class="btn btn-link btn-sm btn-reset" :class="{disabled: ! hasMarkers()}">Start over</button>
    </div>
    `,
    mounted: function () {
        dataStorage.data.replanner = this;
    },
    data: function () {
        return {
            plan: null,
            imported: false,
            win: window,
            params: window.parameters,
            mode: null,
            markers: {},
            loading: false,

            layers: {
                planBg: null,
                plan: null,
                replanningBg: null,
                replanning: null,
                finalizedBg: null,
                finalized: null,
            }
            
        }
    },
    watch: {
        plan(newPlan, oldPlan) {
            if (null === this.plan || (this.plan && newPlan && newPlan._data && this.plan._data._id != newPlan._data._id) ) {
                this.reset();
            } // end if
        }
    },
    methods: {
        setPlan(plan, imported = false) {
            this.plan = plan;
            this.imported = imported;
        },
        init() {
            const that = this;
            this.win.mapboxMap.on('click', ev => {
                that.addMarker(ev.latlng);
            });
        },
        addMarker(latLng) {
            const that = this;
            if ('edit' == that.mode) {
                const marker = L.marker(latLng, {
                    icon: MIDDLE_POINT_MARKER_ICON,
                    draggable: true,
                }).addTo(that.win.mapboxMap);
                
                marker._icon.classList.add('replanning-marker');
                marker.__id = 'id_' + get_random_string();
                
                marker.on('contextmenu', ev => {
                    if (null == that.mode) return;
                        
                    that.win.mapboxMap.removeLayer(that.markers[ev.target.__id]);
                    delete that.markers[ev.target.__id];
                    that.paint();
                });
            
                marker.on('dragend', () => {
                    that.paint();
                });

                that.markers[marker.__id] = marker;
                that.paint();
            } // end if
        },
        toggleMode() {
            if (null === this.mode) {
                this.mode = 'edit';
                this.win.document.body.classList.add('replanning-mode-edit');

                if (window.draggable) {
                    window.draggable.disable();
                } // end if
            } else {
                this.mode = null;
                this.win.document.body.classList.remove('replanning-mode-edit');
                
                if (window.draggable) {
                    window.draggable.enable();
                } // end if
            } // end if-else
        },
        reset() {
            const that = this;
            // if (confirm('You sure?')) {

                for (key in this.markers) {
                    that.win.mapboxMap.removeLayer(that.markers[key]);
                } // end for

                this.markers = {};
                this.mode = null;
                this.paint(); 
                
                if ( ! dataStorage.data.routeOpts.extra.plansVisible) {
                    dataStorage.data.routeOpts.pick('default');
                } // end if
            // } // end if
        },
        close() {
            this.reset();
            this.plan = undefined;
            this.paint();
            if ( ! dataStorage.data.routeOpts.extra.plansVisible) {
                dataStorage.data.routeOpts.pick('default');
            } // end if
        },
        paint() {
            const that = this;

            this.$forceUpdate();

            for (key in this.layers) {
                if (null !== this.layers[key]) {
                    that.win.mapboxMap.removeLayer(this.layers[key]);
                } // end if
                
                this.layers[key] = null;
            } // end for

            if ( ! this.hasPlan() || ! this.hasMarkers() ) return;

            if (dataStorage.data.routeOpts.extra.plansVisible) {
                dataStorage.data.routeOpts.toggleVisibility();
            } // end if

            const originalPlanStyle = Object.assign({}, BFRIENDLY_OPTIONS);;
            originalPlanStyle.color = 'rgb(241,161,104)';
            this.layers.planBg = L.polyline(this.plan.allLatLongsExclWalk, HIGHLIGHT_OPTIONS);
            this.layers.plan = L.polyline(this.plan.allLatLongsExclWalk, originalPlanStyle);

            const replanningCoordinates = this.getCoordinates();
            
            const replanningStyle = Object.assign({}, BS_BIKE_OPTIONS);;
            replanningStyle.color = 'rgb(241,210,71)';
            this.layers.replanningBg = L.polyline(replanningCoordinates, HIGHLIGHT_OPTIONS);
            this.layers.replanning = L.polyline(replanningCoordinates, replanningStyle);

            for (key in this.layers) {
                if (null !== this.layers[key]) {
                    that.win.mapboxMap.addLayer(this.layers[key]);    
                } // end if
            } // end for
        },
        getCoordinates() {
            const replanningLatLongs = [];
            
            for (id in this.markers) {
                replanningLatLongs.push(this.markers[id]._latlng);
            } // end for

            if (this.imported) {
                return replanningLatLongs;
            } // end if

            var minDistance = Infinity;
            var zeroCoordinate = null;
            var zeroCoordinateIndex = 0;

            var n = 0;
            this.plan.allLatLongsExclWalk.forEach(coord => {
                const currentDistance = distance(coord.lat, coord.lng, replanningLatLongs[0].lat, replanningLatLongs[0].lng);

                if (currentDistance < minDistance) {
                    minDistance = currentDistance;
                    zeroCoordinate = coord;
                    zeroCoordinateIndex = n;
                } // end if
                ++n;
            });

            const originalRouteCoords = this.plan.allLatLongsExclWalk.slice(0, zeroCoordinateIndex);
            replanningLatLongs.unshift(zeroCoordinate);

            return [].concat(originalRouteCoords).concat(replanningLatLongs);    
        },
        replan() {
            // TODO: new replanner request format
            const that = this;
            let latLngs = [];
            
            for (var i = 0; i < this.win.markers.length; i++) {
                let ll = markers[i].getLatLng();
                if (ll) latLngs.push(ll);
            } // end for

            const request = this.win.router.buildPlanningRequest(latLngs);
            
            // request.uid = router.getLastResponseHash();
            request.routeId = this.plan._data._id;
            request.responseId = router.getLastResponseHash();
            request.stickToPlan = (that.$refs.stickToPlan.checked);
            const userTrack = [];
            
            let n = 0;
            // for (id in this.markers) {
            const coords = this.getCoordinates();
            coords.forEach(ll => {
                userTrack.push({
                    lat: ll.lat,
                    lon: ll.lng,
                    elevation: 0,
                    timestamp: date_to_c(new Date),
                    onlineQuality: 2,
                    postProcQuality: 2,
                    bearing: -1.0,
                    accuracy: 0,
                    speed: 0
                });
            
                if ((n+1) === Object.size(coords)) {
                    request.origin = {
                        lat: ll.lat,
                        lon: ll.lng
                    };
                } // end if
                ++n;
            // } // end for
            }); 

            request.userTrack = [userTrack];

            request.userCurrentLocation = userTrack[userTrack.length - 1];

            that.loading = true;
            axios.post(dataStorage.data.debugger.overrides.generatedUrlRerouting, JSON.stringify(request), {
                timeout: 120000,
                headers: {
                    'Content-Type': 'application/json; charset=utf-8'
                }
            }).then(function (res) {
                
                if ('v7' == router.apiVersion()) {
                    res.data.plans = res.data.routes;
                } // end if

                var allLatLongs = [];
                if (res.data.plans && res.data.plans.length) {
                    for (var i = 0; i < (res.data.plans[0].legs.length); i++) {
                        for (var j = 0; j < (res.data.plans[0].legs[i].steps.length); j++) {
                            
                            allLatLongs.push({
                                lat: res.data.plans[0].legs[i].steps[j].start.lat,
                                lng: res.data.plans[0].legs[i].steps[j].start.lon
                            });
                            
                            for (let k = 0; k < res.data.plans[0].legs[i].steps[j].via.length; k++) {
                                const via = res.data.plans[0].legs[i].steps[j].via[k];
                                allLatLongs.push({
                                    lat: via.lat,
                                    lng: via.lon
                                });
                            } // end for

                            allLatLongs.push({
                                lat: res.data.plans[0].legs[i].steps[j].end.lat,
                                lng: res.data.plans[0].legs[i].steps[j].end.lon
                            });

                        } // end for    
                    } // end for
                } // end if

                if (that.layers.finalized) {
                    that.win.mapboxMap.removeLayer(that.layers.finalized);
                    that.win.mapboxMap.removeLayer(that.layers.finalizedBg);
                } // end if

                that.layers.finalizedBg = L.polyline(allLatLongs, HIGHLIGHT_OPTIONS);
                that.layers.finalized = L.polyline(allLatLongs, BFRIENDLY_OPTIONS);

                that.win.mapboxMap.addLayer(that.layers.finalizedBg);
                that.win.mapboxMap.addLayer(that.layers.finalized);
                
            }).catch(function (ex) {
                throw ex;
            }).finally(function () {
                that.loading = false;
            });
        },
        hasMarkers() {
            // let cnt = 0;
            for (key in this.markers) {
                // cnt++;
                /*if (cnt > 1)*/ return true;
            } // end for
            return false;
        },
        hasPlan() {
            return undefined !== this.plan && this.plan;
        },
        openModal() {
            dataStorage.data.replanningModal.display = true;
        }
    }
});

;

/* File:  replanner-modal.vue*/

Vue.component('replanner-modal', {
    template: `
    <div v-if="win.parameters.components.experimental" id="replanner-modal" class="replanner-modal modal-hide-btns">
        <modal v-if="display" v-on:close="display = false">
            <div slot="header">
                <b>JSON request importer</b>
            </div>
            <div slot="body">
                
                <input type="file" ref="fileInput" v-on:change="readText($event)" style="margin-bottom: 25px;" />
                <textarea v-on:change="onChange" class="form-control" ref="textInput" rows="15" placeholder="{ howto: &quot;Upload your .json file OR paste the JSON blob directly in here and click 'Apply'.&quot; }"></textarea>
                <label class="pull-right" style="font-weight: normal;margin: 5px 0 0 0;">
                    Legacy mode
                    <input ref="legacy" type="checkbox" style="margin-left: 5px; position: relative; top: 2px;" />
                </label>
            </div>
            <div slot="footer">
                <div class="text-right">
                    <button class="btn btn-default" v-on:click="display = false;">
                        Cancel
                    </button>
                    <button class="btn btn-success" v-on:click="apply(); display = false;">
                        Apply
                    </button>
                </div>
            </div>
        </modal>
    </div>
    `,
    mounted: function () {
        dataStorage.data.replanningModal = this;
    },
    watch: {

    },
    data: function () {
        return {
            display: false,
            win: window,
            request: null
        }
    },
    methods: {
        onChange() {
            const json = JSON.parse(this.$refs.textInput.value);
            // console.log(this.$refs.textInput.value, json);
            if (json) {
                this.request = json;
            } // end if
        },
        async readText(event) {
            const file = event.target.files.item(0);
            const text = await file.text();

            const json = JSON.parse(text);
            const formatted = JSON.stringify(json, null, 4);

            this.$refs.textInput.value = formatted;

            this.request = json;
        },
        apply() {
            const that = this;

            if ('object' !== typeof this.request) {
                return alert("This doesn't look like a valid JSON.");
            } // end if

            this.win.painter.clearView();

            const data = {
                responseId: null,
                planId: null,
                userTrack: null,
            };

            if (this.$refs.legacy.checked) {
                data.responseId = this.request.replanningInfo.responseId;
                data.planId = that.request.replanningInfo.planId;
                data.userTrack = that.request.replanningInfo.userTrack;

                this.paint(data);
            } else {
                data.responseId = this.request.responseId;
                data.planId = that.request.routeId;

                axios.post(that.win.parameters.api.reRouting, that.request).then(reroutingResponse => {
                    data.userTrack = reroutingResponse.data.routes[0];

                    that.paint(data);
                });
            }

        },
        paint(data) {
            const that = this;
            
            this.win.router.downloadResponse(data.responseId, function () {
                that.win.painter.handleResponse();

                // this.win.painter.handleResponse.bind(this.win.painter);
                that.win.painter.selectPlan(data.planId);

                dataStorage.data.replanner.setPlan(plansStorage[data.planId], true);

                if (null === dataStorage.data.replanner.mode) {
                    dataStorage.data.replanner.toggleMode();
                } // end if

                data.userTrack.forEach(leg => {
                    leg.forEach(point => {
                        const latLng = new L.latLng(point.lat, point.lon);

                        // TODO: Inject all metadata, not just ll
                        dataStorage.data.replanner.addMarker(latLng);
                    });
                });

                dataStorage.data.replanner.toggleMode();
                // dataStorage.data.replanner.replan();
            });
        }
    }
});;

/* File:  public-settings-panel.vue*/

Vue.component('public-settings-panel', {
    template: `
    <div id="public-settings-panel" class="panel m-b-md">
        <public-settings-panel-biketype />
        <journey-traveler />
        
        <public-settings-panel-avoidclimb :class="{hidden: ! parameters.components.preferences.climbBool}" />
        <public-settings-panel-avoidtraffic :class="{hidden: ! parameters.components.preferences.trafficBool}" />
        
        <public-settings-panel-carfree :class="{hidden: ! parameters.components.preferences.traffic}" />
        <public-settings-panel-smooth :class="{hidden: ! parameters.components.preferences.surface}" />
        <public-settings-panel-flat :class="{hidden: ! parameters.components.preferences.hills}" />
        
        <public-settings-panel-polluted-areas :class="{hidden: ! parameters.components.preferences.pollutedAreas}" />

        <public-settings-panel-cleanair :class="{hidden: ! parameters.components.preferences.air}" />

        <public-settings-panel-avoidstairs :class="{hidden: ! parameters.components.preferences.stairs}" />
        <public-settings-panel-no-pavements :class="{hidden: ! parameters.components.preferences.pavements}" />
        <public-settings-panel-no-oneway :class="{hidden: ! parameters.components.preferences.oneWays}" />

        <public-settings-panel-extra-safe :class="{hidden: ! parameters.components.experimental}" />

        <public-settings-panel-datetime :class="{hidden: ! parameters.components.preferences.dateTime}" />

        <public-settings-panel-prettytime v-if="parameters.components.preferences.prettyTime" />
        <public-settings-panel-seasons v-if="parameters.components.preferences.seasons" />
        
        <public-settings-panel-recompute />
        <toggle-btn />

    </div>
    `,
    data: function () {
        return {
            userLevel: parameters.userLevel,
            parameters: parameters,
        }
    },
    // 
    // <public-settings-panel-fitness />
    // <public-settings-panel-popularity />
    // <public-settings-panel-nature />
});;

/* File:  public-settings-panel-smooth.vue*/

Vue.component('public-settings-panel-smooth', {
    template: `
    <div class="row scaleable" :class="{highlighted: isOpen}">
        <div class="col-sm-2 text-center no-padding">
            <img src="/v2.5/img/resources/smooth.svg" class="margin-top-12 ico" alt="Fitness icon">
        </div>
        <div class="col-sm-10 right-side">
            <div class="scale">
                <label class="black">
                    {{ language['planner.smooth'] }}
                    <span class="editable pointer scale-btn" :data-lvl="lvl" v-on:click="isOpen = ! isOpen">
                        <span v-html="this.getTxtLvl().title"></span>
                        <i v-if="isOpen" class="fa fa-angle-up"></i>
                        <i v-else="isOpen" class="fa fa-angle-down"></i>
                    </span>
                </label>
            </div>
            <div class="scale-options" :class="{hidden: ! isOpen}">
                <div v-for="oneLvl, index in txtLvls" class="scale-wrapper pointer relative" :class="{'is-active': index == lvl, 'hidden': (1 == index && true != params.components.preferences.surface_lvl05)}" v-on:click="pick(index)">
                    <i class="fa fa-check scale-icon" aria-hidden="true"></i>
                    <div class="scale-title" v-html="oneLvl.title"></div>
                    <div class="scale-body" v-html="oneLvl.body"></div>
                </div>
            </div>
        </div>
    </div>
    `,
    mounted: function(){
        dataStorage.data.publicSettingsSmooth = this;
    },
    data: function () {
        return {
            language: language,
            lvl: 3,
            txtLvls: {
                0: { title: language['planner.smooth.lvl0.title'], body: language['planner.smooth.lvl0.body'] },
                1: { title: language['planner.smooth.lvl05.title'], body: language['planner.smooth.lvl05.body'] },
                2: { title: language['planner.smooth.lvl1.title'], body: language['planner.smooth.lvl1.body'] },
                3: { title: language['planner.smooth.lvl2.title'], body: language['planner.smooth.lvl2.body'] },
                4: { title: language['planner.smooth.lvl3.title'], body: language['planner.smooth.lvl3.body'] },
            },
            isOpen: false,
            params: parameters
        }
    },
    methods: {
        getTxtLvl: function() {
            return this.txtLvls[this.lvl];
        },
        pick: function(lvl) {
            this.lvl = parseInt(lvl);
            this.isOpen = false;
        }
    }
});;

/* File:  public-settings-panel-seasons.vue*/

Vue.component('public-settings-panel-seasons', {
    template: `
    <div class="public-settings-panel-seasons" :class="{readonly: params.components.preferences.readonlySeasons}">
        <div class="row">
            <div class="col-sm-12">
                <div class="form-group">
                    <button v-for="data, season in seasons" class="btn btn-season" v-on:click="setSeason(season);" :class="{ 'btn-default' : ! seasons[season].active, 'btn-info' : seasons[season].active, 'active' : seasons[season].active }">
                        <img class="only-inactive" :src="'/v2.5/img/seasons/' + season + '.svg'" :alt="language['seasons.' + season]" />
                        <img class="only-active" :src="'/v2.5/img/seasons/' + season + '_white.svg'" :alt="language['seasons.' + season]" />
                        {{ language['seasons.' + season] }}
                    </button>
                </div>
            </div>
        </div>
    </div>
    `,
    mounted: function () {
        dataStorage.data.settingsSeasons = this;
        this.detectSeason();
    },
    data: function () {
        return {
            userLevel: parameters.userLevel,
            language: language,
            yearSeasons: ['spring', 'summer', 'autumn', 'winter'],
            seasons: {
                spring: { date: '03-20', active: false, },
                summer: { date: '06-21', active: false, },
                autumn: { date: '09-20', active: false, },
                winter: { date: '12-22', active: false, },
            },
            timeout: null,
            params: window.parameters
        }
    },
    methods: {
        detectSeason: function () {
            let now = new Date;
            let y = (new Date).getFullYear();
            for (var i = 0; i < this.yearSeasons.length; i++) {
                let season = this.yearSeasons[i];
                if (now < (new Date(`${y}-${this.seasons[season].date}`))) {
                    if (i > 0) {
                        this.setSeason(this.yearSeasons[i - 1]);
                    } else {
                        this.setSeason(this.yearSeasons[this.yearSeasons.length - 1]);
                    } // end if-else
                    break;
                } // end if
                if (3 === i) {
                    this.setSeason('winter');
                } // end if
            } // end for
        },
        setSeason: function (season) {
            var that = this;

            this.yearSeasons.forEach(s => {
                that.seasons[s].active = false;
            });
            this.seasons[season].active = true;
            
            if (undefined !== dataStorage.data.airPollution) {
                dataStorage.data.airPollution.refreshAirQuality();    
            } // end if
        },
        getDate() {
            const that = this;
            var ret = null; 

            this.yearSeasons.forEach(s => {
                if (that.seasons[s].active) {
                    let date = that.seasons[s].date;
                    let y = (new Date).getFullYear();
                    ret = `${y}-${date}`;

                } // end if
            });

            return ret;
        },
        getSeason() {
            const that = this;
            var ret = null; 

            this.yearSeasons.forEach(s => {
                if (that.seasons[s].active) {
                    ret = s;
                } // end if
            });

            return ret;
        }
    }
});;

/* File:  public-settings-panel-recompute.vue*/

Vue.component('public-settings-panel-recompute', {
    template: `
    <div id="searchwithsettings" class="row p-t-sm">
        <div class="col-sm-offset-3 col-sm-6 col-xs-12 ">
            <button id="searchwithsettingsbtn" class="btn btn-block btn-primary">{{ language['planner.recompute'] }}</button>
        </div>
    </div>
    `,
    data: function () {
        return {
            language: language
        }
    },
});;

/* File:  public-settings-panel-prettytime.vue*/

Vue.component('public-settings-panel-prettytime', {
    template: `
    <div class="public-settings-panel-prettytime">
        <div class="row">
            <div class="col-sm-2 text-center no-padding">
                <img src="/v2.5/img/clock.svg" style="margin-top: 7px; width: 20px; opacity: 0.4;">
            </div>
            <div class="col-sm-10 right-side">
                <label class="gray" style="font-weight: normal; padding: 8px 0 0 5px;">{{ language['time'] }}</label>
                <div class="form-group" style="position: absolute; right: 30px; top: 0;">
                    <button v-on:click="decrement" class="btn btn-default btn-time-widget left"><span class="val">-</span></button>
                    <input readonly class="readonly form-control time-widget text-center" type="text" :value="formattedTime" />
                    <button v-on:click="increment" class="btn btn-default btn-time-widget right"><span class="val">+</span></button>
                </div>
            </div>
        </div>
        <div class="row hidden">
            <div class="col-sm-12">
                <div class="form-group">
                    <div ref="dt" class='input-group date' id='datetimepicker1'>
                        <span class="input-group-addon" data-tooltip="yes" :title="language['transport.specific_time']">
                            <span class="glyphicon glyphicon-calendar"></span>
                        </span>    
                        <input type='text' class="form-control"/>
                    </div>
                </div>
            </div>
        </div>
    </div>
    `,
    mounted: function () {
        dataStorage.data.settingsPrettytime = this;
        this.initTime();
    },
    data: function () {
        return {
            userLevel: parameters.userLevel,
            language: language,
            datepickerVisible: false,
            formattedTime: null,
            time: null,
            timeout: null,
        }
    },
    watch: {
        time: function () {
            this.formatTime();
        },
    },
    methods: {
        getDt: function (utc) {
            return dataStorage.data.settingsDatetime.datepickerVal;
        },
        getDtObj: function (utc) {
            return this.getDt();
        },
        formatTime: function () {
            let t = ('0' + this.time).slice(-2) + ':00';
            this.formattedTime = t;
            this.updateDatetimePicker();
            dataStorage.data.airPollution.refreshAirQuality();
        },
        increment: function () {
            if (23 == this.time) this.time = 0;
            else ++this.time;
        },
        decrement: function () {
            if (0 == this.time) this.time = 23;
            else --this.time;
        },
        updateDatetimePicker: function () {
            var that = this;

            let date = dataStorage.data.settingsSeasons.getDate();
            let dt = `${date}T${that.formattedTime}:00`;
            dataStorage.data.settingsDatetime.setDt(new Date(dt));

        },
        initTime: function(){
            let now = this.getDtObj();
            this.time = now.getHours();
        }
    }
});;

/* File:  public-settings-panel-popularity.vue*/

Vue.component('public-settings-panel-popularity', {
    template: `
    <div class="row scaleable" :class="">
        <div class="col-sm-2 text-center no-padding">
            <img src="/v2.5/img/resources/popularity.svg" class="margin-top-12 ico" alt="Fitness icon">
        </div>
        <div class="col-sm-10 right-side">
            <div class="scale">
                <label class="black">
                    Popularity
                    <span class="editable" :data-lvl="lvl">
                        <img src="/v2.5/img/resources/minus.svg" alt="Minus" class="pointer lil-button" v-on:click="minus">
                        <img src="/v2.5/img/resources/lvl-1.svg" alt="lvl 1" class="custom-scale lvl-1">
                        <img src="/v2.5/img/resources/lvl-2.svg" alt="lvl 2" class="custom-scale lvl-2">
                        <img src="/v2.5/img/resources/lvl-3.svg" alt="lvl 3" class="custom-scale lvl-3">
                        <img src="/v2.5/img/resources/plus.svg" alt="Plus" class="pointer lil-button" v-on:click="plus">
                    </span>
                </label>
            </div>
        </div>
    </div>
    `,
    mounted: function(){
        dataStorage.data.publicSettingsPopularity = this;
    },
    data: function () {
        return {
            language: language,
            lvl: 2,
        }
    },
    watch: {
        checked: function(newVal){
            if ( this.$refs.checkbox.checked != newVal ) {
                this.$refs.checkbox.checked = newVal;
            } // end if
        }
    },
    methods: {
        minus: function(){
            if ( this.lvl > 1 ) {
                --this.lvl;
            } // end if
        },
        plus: function(){
            if ( this.lvl < 3 ) {
                ++this.lvl;
            } // end if
        }
    }
});;

/* File:  public-settings-panel-polluted-areas.vue*/

Vue.component('public-settings-panel-polluted-areas', {
    template: `
    <div class="row scaleable" :class="{highlighted: isOpen}">
        <div class="col-sm-2 text-center no-padding">
            <img src="/v2.5/img/resources/cloud--gray.svg" class="margin-top-12 ico" alt="Cloud icon">
        </div>
        <div class="col-sm-10 right-side">
            <div class="scale">
                <label class="black">
                    {{ language['transport.avoid_pollution'] }}
                    <span class="editable pointer scale-btn" :data-lvl="lvl" v-on:click="isOpen = ! isOpen">
                        <span v-html="this.getTxtLvl().title"></span>
                        <i v-if="isOpen" class="fa fa-angle-up"></i>
                        <i v-else="isOpen" class="fa fa-angle-down"></i>
                    </span>
                </label>
            </div>
            <div class="scale-options" :class="{hidden: ! isOpen}">
                <div v-for="oneLvl, index in txtLvls" class="scale-wrapper pointer relative" :class="{'is-active': index == lvl}" v-on:click="pick(index)">
                    <i class="fa fa-check scale-icon" aria-hidden="true"></i>
                    <div class="scale-title" v-html="oneLvl.title"></div>
                    <div class="scale-body" v-html="oneLvl.body"></div>
                </div>
            </div>
        </div>
    </div>
    `,
    mounted: function(){
        dataStorage.data.publicSettingsAvoidPollution = this;
    },
    data: function () {
        return {
            language: language,
            lvl: 2,
            txtLvls: {
                1: { title: language['planner.avoid_pollution.lvl1.title'], body: language['planner.avoid_pollution.lvl1.body'] },
                2: { title: language['planner.avoid_pollution.lvl2.title'], body: language['planner.avoid_pollution.lvl2.body'] },
                3: { title: language['planner.avoid_pollution.lvl3.title'], body: language['planner.avoid_pollution.lvl3.body'] },
            },
            isOpen: false,
        }
    },
    methods: {
        getTxtLvl: function() {
            return this.txtLvls[this.lvl];
        },
        pick: function(lvl) {
            this.lvl = parseInt(lvl);
            this.isOpen = false;
        }
    }
});;

/* File:  public-settings-panel-no-polluted-areas.vue*/

Vue.component('public-settings-panel-no-polluted-areas', {
    template: `
    <div class="row colorizable" :class="{checked: checked}">
        <div class="col-sm-2 text-center no-padding">
            <img src="/v2.5/img/resources/cloud.svg" class="margin-top-10 ico" alt="Cloud icon" style="width: 16px;">
        </div>
        <div class="col-sm-10 right-side">
            <div class="checkbox" v-on:change="onChange(this);">
                <label class="gray">
                    {{ language['transport.avoid_pollution'] }}
                    <input id="avoid_polluted_areas" type="checkbox" ref="checkbox">
                    <img :src="parameters.branding.images.icons.checked" alt="Checked" class="custom-checkbox checked">
                    <img src="/v2.5/img/resources/not-checked.svg" alt="Not checked" class="custom-checkbox not-checked">
                </label>
            </div>
        </div>
    </div>
    `,
    mounted: function(){
        dataStorage.data.publicSettingsNoAirPollution = this;
    },
    data: function () {
        return {
            language: language,
            checked: false,
            parameters: window.parameters
        }
    },
    watch: {
        checked: function(newVal){
            if ( this.$refs.checkbox.checked != newVal ) {
                this.$refs.checkbox.checked = newVal;
            } // end if
        }
    },
    methods: {
        onChange: function(el){
            this.checked = this.$refs.checkbox.checked;
        },
        isChecked() {
            return this.$refs.checkbox.checked;
        }
    }
});;

/* File:  public-settings-panel-no-pavements.vue*/

Vue.component('public-settings-panel-no-pavements', {
    template: `
    <div class="row colorizable" :class="{checked: checked}">
        <div class="col-sm-2 text-center no-padding">
            <img src="/v2.5/img/resources/pavement.svg" class="margin-top-10 ico" alt="Pavement icon">
        </div>
        <div class="col-sm-10 right-side">
            <div class="checkbox" v-on:change="onChange(this);">
                <label class="gray">
                    {{ language['planner.avoid.pavements'] }}
                    <input id="avoid_pavements" type="checkbox" ref="checkbox">
                    <img :src="parameters.branding.images.icons.checked" alt="Checked" class="custom-checkbox checked">
                    <img src="/v2.5/img/resources/not-checked.svg" alt="Not checked" class="custom-checkbox not-checked">
                </label>
            </div>
        </div>
    </div>
    `,
    mounted: function(){
        dataStorage.data.publicSettingsNoPavements = this;
    },
    data: function () {
        return {
            language: language,
            checked: false,
            parameters: window.parameters
        }
    },
    watch: {
        checked: function(newVal){
            if ( this.$refs.checkbox.checked != newVal ) {
                this.$refs.checkbox.checked = newVal;
            } // end if
        }
    },
    methods: {
        onChange: function(el){
            this.checked = this.$refs.checkbox.checked;
        }
    }
});;

/* File:  public-settings-panel-no-pavements-lvl.vue*/

Vue.component('public-settings-panel-no-pavements-lvl', {
    template: `
    <div class="row scaleable" :class="">
        <div class="col-sm-2 text-center no-padding">
            <img src="/v2.5/img/resources/pavement.svg" class="margin-top-12 ico" alt="Pavement icon">
        </div>
        <div class="col-sm-10 right-side">
            <div class="scale">
                <label class="black">
                    {{ language['planner.avoid.pavements'] }}
                    <span class="editable" :data-lvl="lvl">
                        <img src="/v2.5/img/resources/minus.svg" alt="Minus" class="pointer lil-button" v-on:click="minus">
                        <img src="/v2.5/img/resources/lvl-1.svg" alt="lvl 1" class="custom-scale lvl-1">
                        <img src="/v2.5/img/resources/lvl-2.svg" alt="lvl 2" class="custom-scale lvl-2">
                        <img src="/v2.5/img/resources/lvl-3.svg" alt="lvl 3" class="custom-scale lvl-3">
                        <img src="/v2.5/img/resources/plus.svg" alt="Plus" class="pointer lil-button" v-on:click="plus">
                    </span>
                </label>
            </div>
        </div>
    </div>
    `,
    mounted: function(){
        dataStorage.data.publicSettingsNoPavements = this;
    },
    data: function () {
        return {
            language: language,
            lvl: 2,
        }
    },
    watch: {
        checked: function(newVal){
            if ( this.$refs.checkbox.checked != newVal ) {
                this.$refs.checkbox.checked = newVal;
            } // end if
        }
    },
    methods: {
        minus: function(){
            if ( this.lvl > 1 ) {
                --this.lvl;
            } // end if
        },
        plus: function(){
            if ( this.lvl < 3 ) {
                ++this.lvl;
            } // end if
        }
    }
});;

/* File:  public-settings-panel-no-oneway.vue*/

Vue.component('public-settings-panel-no-oneway', {
    template: `
    <div class="row colorizable" :class="{checked: checked}">
        <div class="col-sm-2 text-center no-padding">
            <img src="/v2.5/img/resources/oneway.svg" class="margin-top-10 ico" alt="Oneway icon">
        </div>
        <div class="col-sm-10 right-side">
            <div class="checkbox" v-on:change="onChange(this);">
                <label class="gray">
                    {{ language['planner.avoid.oneway'] }}
                    <input id="avoid_oneway" type="checkbox" ref="checkbox">
                    <img :src="parameters.branding.images.icons.checked" alt="Checked" class="custom-checkbox checked">
                    <img src="/v2.5/img/resources/not-checked.svg" alt="Not checked" class="custom-checkbox not-checked">
                </label>
            </div>
        </div>
    </div>
    `,
    mounted: function(){
        dataStorage.data.publicSettingsNoOneway = this;
    },
    data: function () {
        return {
            language: language,
            checked: false,
            parameters: window.parameters
        }
    },
    watch: {
        checked: function(newVal){
            if ( this.$refs.checkbox.checked != newVal ) {
                this.$refs.checkbox.checked = newVal;
            } // end if
        }
    },
    methods: {
        onChange: function(el){
            this.checked = this.$refs.checkbox.checked;
        }
    }
});;

/* File:  public-settings-panel-no-oneway-lvl.vue*/

Vue.component('public-settings-panel-no-oneway-lvl', {
    template: `
    <div class="row scaleable" :class="">
        <div class="col-sm-2 text-center no-padding">
            <img src="/v2.5/img/resources/oneway.svg" class="margin-top-12 ico" alt="Oneway icon">
        </div>
        <div class="col-sm-10 right-side">
            <div class="scale">
                <label class="black">
                    {{ language['planner.avoid.oneway'] }}
                    <span class="editable" :data-lvl="lvl">
                        <img src="/v2.5/img/resources/minus.svg" alt="Minus" class="pointer lil-button" v-on:click="minus">
                        <img src="/v2.5/img/resources/lvl-1.svg" alt="lvl 1" class="custom-scale lvl-1">
                        <img src="/v2.5/img/resources/lvl-2.svg" alt="lvl 2" class="custom-scale lvl-2">
                        <img src="/v2.5/img/resources/lvl-3.svg" alt="lvl 3" class="custom-scale lvl-3">
                        <img src="/v2.5/img/resources/plus.svg" alt="Plus" class="pointer lil-button" v-on:click="plus">
                    </span>
                </label>
            </div>
        </div>
    </div>
    `,
    mounted: function(){
        dataStorage.data.publicSettingsNoOneway = this;
    },
    data: function () {
        return {
            language: language,
            lvl: 2,
        }
    },
    watch: {
        checked: function(newVal){
            if ( this.$refs.checkbox.checked != newVal ) {
                this.$refs.checkbox.checked = newVal;
            } // end if
        }
    },
    methods: {
        minus: function(){
            if ( this.lvl > 1 ) {
                --this.lvl;
            } // end if
        },
        plus: function(){
            if ( this.lvl < 3 ) {
                ++this.lvl;
            } // end if
        }
    }
});;

/* File:  public-settings-panel-nature.vue*/

Vue.component('public-settings-panel-nature', {
    template: `
    <div class="row scaleable" :class="">
        <div class="col-sm-2 text-center no-padding">
            <img src="/v2.5/img/resources/nature.svg" class="margin-top-12 ico" alt="Fitness icon">
        </div>
        <div class="col-sm-10 right-side">
            <div class="scale">
                <label class="black">
                    In nature
                    <span class="editable" :data-lvl="lvl">
                        <img src="/v2.5/img/resources/minus.svg" alt="Minus" class="pointer lil-button" v-on:click="minus">
                        <img src="/v2.5/img/resources/lvl-1.svg" alt="lvl 1" class="custom-scale lvl-1">
                        <img src="/v2.5/img/resources/lvl-2.svg" alt="lvl 2" class="custom-scale lvl-2">
                        <img src="/v2.5/img/resources/lvl-3.svg" alt="lvl 3" class="custom-scale lvl-3">
                        <img src="/v2.5/img/resources/plus.svg" alt="Plus" class="pointer lil-button" v-on:click="plus">
                    </span>
                </label>
            </div>
        </div>
    </div>
    `,
    mounted: function(){
        dataStorage.data.publicSettingsNature = this;
    },
    data: function () {
        return {
            language: language,
            lvl: 2,
        }
    },
    watch: {
        checked: function(newVal){
            if ( this.$refs.checkbox.checked != newVal ) {
                this.$refs.checkbox.checked = newVal;
            } // end if
        }
    },
    methods: {
        minus: function(){
            if ( this.lvl > 1 ) {
                --this.lvl;
            } // end if
        },
        plus: function(){
            if ( this.lvl < 3 ) {
                ++this.lvl;
            } // end if
        }
    }
});;

/* File:  public-settings-panel-flat.vue*/

Vue.component('public-settings-panel-flat', {
    template: `
    <div class="row scaleable" :class="{highlighted: isOpen}">
        <div class="col-sm-2 text-center no-padding">
            <img src="/v2.5/img/resources/flat.svg" class="margin-top-12 ico" alt="Fitness icon">
        </div>
        <div class="col-sm-10 right-side">
            <div class="scale">
                <label class="black">
                    {{ language['planner.flat'] }}
                    <span class="editable pointer scale-btn" :data-lvl="lvl" v-on:click="isOpen = ! isOpen">
                        <span v-html="this.getTxtLvl().title"></span>
                        <i v-if="isOpen" class="fa fa-angle-up"></i>
                        <i v-else="isOpen" class="fa fa-angle-down"></i>
                    </span>
                </label>
            </div>
            <div class="scale-options" :class="{hidden: ! isOpen}">
                <div v-for="oneLvl, index in txtLvls" class="scale-wrapper pointer relative" :class="{'is-active': index == lvl}" v-on:click="pick(index)">
                    <i class="fa fa-check scale-icon" aria-hidden="true"></i>
                    <div class="scale-title" v-html="oneLvl.title"></div>
                    <div class="scale-body" v-html="oneLvl.body"></div>
                </div>
            </div>
        </div>
    </div>
    `,
    mounted: function(){
        dataStorage.data.publicSettingsFlat = this;
    },
    data: function () {
        return {
            language: language,
            lvl: 2,
            txtLvls: {
                1: { title: language['planner.flat.lvl1.title'], body: language['planner.flat.lvl1.body'] },
                2: { title: language['planner.flat.lvl2.title'], body: language['planner.flat.lvl2.body'] },
                3: { title: language['planner.flat.lvl3.title'], body: language['planner.flat.lvl3.body'] },
            },
            isOpen: false,
        }
    },
    methods: {
        getTxtLvl: function() {
            return this.txtLvls[this.lvl];
        },
        pick: function(lvl) {
            this.lvl = parseInt(lvl);
            this.isOpen = false;
        }
    }
});;

/* File:  public-settings-panel-fitness.vue*/

Vue.component('public-settings-panel-fitness', {
    template: `
    <div class="row scaleable" :class="">
        <div class="col-sm-2 text-center no-padding">
            <img src="/v2.5/img/resources/fitness.svg" class="margin-top-12 ico" alt="Fitness icon">
        </div>
        <div class="col-sm-10 right-side">
            <div class="scale">
                <label class="black">
                    Fitness
                    <span class="editable" :data-lvl="lvl">
                        <img src="/v2.5/img/resources/minus.svg" alt="Minus" class="pointer lil-button" v-on:click="minus">
                        <img src="/v2.5/img/resources/lvl-1.svg" alt="lvl 1" class="custom-scale lvl-1">
                        <img src="/v2.5/img/resources/lvl-2.svg" alt="lvl 2" class="custom-scale lvl-2">
                        <img src="/v2.5/img/resources/lvl-3.svg" alt="lvl 3" class="custom-scale lvl-3">
                        <img src="/v2.5/img/resources/plus.svg" alt="Plus" class="pointer lil-button" v-on:click="plus">
                    </span>
                </label>
            </div>
        </div>
    </div>
    `,
    mounted: function(){
        dataStorage.data.publicSettingsFitness = this;
    },
    data: function () {
        return {
            language: language,
            lvl: 2,
        }
    },
    watch: {
        checked: function(newVal){
            if ( this.$refs.checkbox.checked != newVal ) {
                this.$refs.checkbox.checked = newVal;
            } // end if
        }
    },
    methods: {
        minus: function(){
            if ( this.lvl > 1 ) {
                --this.lvl;
            } // end if
        },
        plus: function(){
            if ( this.lvl < 3 ) {
                ++this.lvl;
            } // end if
        }
    }
});;

/* File:  public-settings-panel-extra-safe.vue*/

Vue.component('public-settings-panel-extra-safe', {
    template: `
    <div class="row colorizable" :class="{checked: checked}">
        <div class="col-sm-2 text-center no-padding">
            <!-- <img src="/v2.5/img/resources/oneway.svg" class="margin-top-10 ico" alt="Oneway icon"> -->
        </div>
        <div class="col-sm-10 right-side">
            <div class="checkbox" v-on:change="onChange(this);">
                <label class="gray">
                    Add extra-safe plan
                    <input id="avoid_oneway" type="checkbox" ref="checkbox">
                    <img src="/v2.5/img/resources/checked.svg" alt="Checked" class="custom-checkbox checked">
                    <img src="/v2.5/img/resources/not-checked.svg" alt="Not checked" class="custom-checkbox not-checked">
                </label>
            </div>
        </div>
    </div>
    `,
    mounted: function(){
        dataStorage.data.publicSettingsExtraSafe = this;
    },
    data: function () {
        return {
            language: language,
            checked: false
        }
    },
    watch: {
        checked: function(newVal){
            if ( this.$refs.checkbox.checked != newVal ) {
                this.$refs.checkbox.checked = newVal;
            } // end if
        }
    },
    methods: {
        onChange: function(el){
            this.checked = this.$refs.checkbox.checked;
        }
    }
});;

/* File:  public-settings-panel-datetime.vue*/

Vue.component('public-settings-panel-datetime', {
    template: `
    <div class="row" style="margin: 10px -15px 15px -15px;">
        <div class="col-sm-10 col-sm-offset-2 right-side gray">
            <span class="tiny-descriptor">Date and time</span>
        </div>
        <div class="col-sm-2 text-center no-padding">
            <img src="/v2.5/img/resources/clock.svg" class="margin-top-6" alt="Clock">
        </div>
        <div class="col-xs-6 no-padding-left">
            <div class="form-group">
                <datepicker v-on:click="toggle" v-on:selected="dateSelected" ref="datepicker" :value="datepickerVal" format="dd.MM.yyyy" monday-first input-class="form-control edgy text-center first pointer"></datepicker>
            </div>
        </div>
        <div class="col-sm-4 no-padding-left">
            <div class="form-group">
                <button v-on:click="minus" class="btn btn-link btn-sm btn-time minus">-</button>
                    <input ref="timeInput" maxlen="5" v-on:change="onChange" type="text" :value="timeVal" class="form-control edgy text-center pointer time-picker" />
                <button v-on:click="plus" class="btn btn-link btn-sm btn-time plus">+</button>
            </div>
        </div>
    </div>
    `,
    components: {
        datepicker: vuejsDatepicker
    },
    mounted: function () {
        dataStorage.data.settingsDatetime = this;
        this.datepickerVal = new Date();
        
        this.hours = (new Date).getHours();
        this.minutes = (new Date).getMinutes();
        this.format();
    },
    data: function () {
        return {
            userLevel: parameters.userLevel,
            datepickerVal: null,
            timeVal: null,
            hours: 0,
            minutes: 0,
            step: 15,
        }
    },
    methods: {
        getDt: function () {
            let dt = new Date(this.datepickerVal.valueOf());
            dt.setHours(this.hours);
            dt.setMinutes(this.minutes);
            return dt;
        },
        setDt(dt) {
            this.datepickerVal = dt;
        },
        getDtFormatted: function (onlyTime = false) {
            let date = this.getDt();
            let time = this.getDt();
            let offset = date.getTimezoneOffset();

            if (parameters.components.preferences.seasons) {
                date = new Date(dataStorage.data.settingsSeasons.getDate());
                offset = 0;
            } // end if-else
            if (parameters.components.preferences.prettyTime) {
                time = dataStorage.data.settingsPrettytime.getDtObj();
            } // end if

            let o = '';

            if (onlyTime) {
                o += ('0' + time.getHours().toString()).slice(-2);
                o += ':';
                o += ('0' + time.getMinutes().toString()).slice(-2);
            } else {
                o += date.getFullYear();
                o += '-';
                o += ('0' + (1 + date.getMonth()).toString()).slice(-2);
                o += '-';
                o += ('0' + date.getDate().toString()).slice(-2);
                o += 'T';
                o += ('0' + time.getHours().toString()).slice(-2);
                o += ':';
                o += ('0' + time.getMinutes().toString()).slice(-2);
                o += ':';
                o += ('0' + time.getSeconds().toString()).slice(-2);
                // o += '.000';
                o += (offset<0 ? "+" : "-") + ("0000" + parseInt((Math.abs(offset/60)))).slice(-2);
                o += ':00';
            } // end if

            

            return o;
        },
        toggle: function () {

        },
        onChange: function () {
            let parts = this.$refs.timeInput.value.split(':');
            if ( undefined !== parts[0] && undefined !== parts[1] ) {
                let hours = parseInt(parts[0].replace(/^0+/, ''));
                let minutes = parseInt(parts[1].replace(/^0+/, ''));
                if ( hours >= 0 && hours <= 23 && minutes >= 0 && minutes <= 59 ) {
                    this.hours = hours;
                    this.minutes = minutes;
                    this.format();
                } // end if
            } // end if
        },
        dateSelected: function (dt) {
            this.datepickerVal = dt;
        },
        plus: function () {
            if (23 == this.hours) {
                this.hours = 0;
            } else {
                ++this.hours;
            } // end if-else

            this.format();
        },
        minus: function () {
            if (0 == this.hours) {
                this.hours = 23;
            } else {
                --this.hours;
            } // end if-else

            this.format();
        },
        format: function () {
            this.timeVal = `${this.pad(this.hours)}:${this.pad(this.minutes)}`;
        },
        pad: function (val) {
            return ('0' + val).substr(-2, 2);
        }
    }
});
;

/* File:  public-settings-panel-cleanair.vue*/

Vue.component('public-settings-panel-cleanair', {
    template: `
    <div class="row scaleable" :class="">
        <div class="col-sm-2 text-center no-padding">
            <img src="/v2.5/img/resources/cleanair.svg" class="margin-top-12 ico" alt="Fitness icon">
        </div>
        <div class="col-sm-10 right-side">
            <div class="scale">
                <label class="black">
                    {{ language['planner.cleanair'] }}
                    <span class="editable" :data-lvl="lvl">
                        <img src="/v2.5/img/resources/minus.svg" alt="Minus" class="pointer lil-button" v-on:click="minus">
                        <img src="/v2.5/img/resources/lvl-1.svg" alt="lvl 1" class="custom-scale lvl-1">
                        <img src="/v2.5/img/resources/lvl-2.svg" alt="lvl 2" class="custom-scale lvl-2">
                        <img src="/v2.5/img/resources/lvl-3.svg" alt="lvl 3" class="custom-scale lvl-3">
                        <img src="/v2.5/img/resources/plus.svg" alt="Plus" class="pointer lil-button" v-on:click="plus">
                    </span>
                </label>
            </div>
        </div>
    </div>
    `,
    mounted: function(){
        dataStorage.data.publicSettingsCleanair = this;
    },
    data: function () {
        return {
            language: language,
            lvl: 2,
        }
    },
    watch: {
        checked: function(newVal){
            if ( this.$refs.checkbox.checked != newVal ) {
                this.$refs.checkbox.checked = newVal;
            } // end if
        }
    },
    methods: {
        minus: function(){
            if ( this.lvl > 1 ) {
                --this.lvl;
            } // end if
        },
        plus: function(){
            if ( this.lvl < 3 ) {
                ++this.lvl;
            } // end if
        }
    }
});;

/* File:  public-settings-panel-carfree.vue*/

Vue.component('public-settings-panel-carfree', {
    template: `
    <div class="row scaleable" :class="{highlighted: isOpen}" style="margin-top: 20px;">
        <div class="col-sm-12 gray">
            <span class="tiny-descriptor">{{ language['planner.planpanels.other_opts'] }}</span>
        </div>
        <div class="col-sm-2 text-center no-padding">
            <img src="/v2.5/img/resources/carfree.svg" class="margin-top-12 ico" alt="Fitness icon">
        </div>
        <div class="col-sm-10 right-side">
            <div class="scale">
                <label class="black">
                    {{ language['planner.carfree'] }}
                    <span class="editable pointer scale-btn" :data-lvl="lvl" v-on:click="isOpen = ! isOpen">
                        <span v-html="this.getTxtLvl().title"></span>
                        <i v-if="isOpen" class="fa fa-angle-up"></i>
                        <i v-else="isOpen" class="fa fa-angle-down"></i>
                    </span>
                </label>
            </div>
            <div class="scale-options" :class="{hidden: ! isOpen}">
                <div v-for="oneLvl, index in txtLvls" class="scale-wrapper pointer relative" :class="{'is-active': index == lvl}" v-on:click="pick(index)">
                    <i class="fa fa-check scale-icon" aria-hidden="true"></i>
                    <div class="scale-title" v-html="oneLvl.title"></div>
                    <div class="scale-body" v-html="oneLvl.body"></div>
                </div>
            </div>
        </div>
    </div>
    `,
    mounted: function(){
        dataStorage.data.publicSettingsCarfree = this;
    },
    data: function () {
        return {
            language: language,
            lvl: 2,
            txtLvls: {
                1: { title: language['planner.carfree.lvl1.title'], body: language['planner.carfree.lvl1.body'] },
                2: { title: language['planner.carfree.lvl2.title'], body: language['planner.carfree.lvl2.body'] },
                3: { title: language['planner.carfree.lvl3.title'], body: language['planner.carfree.lvl3.body'] },
            },
            isOpen: false,
        }
    },
    methods: {
        getTxtLvl: function() {
            return this.txtLvls[this.lvl];
        },
        pick: function(lvl) {
            this.lvl = parseInt(lvl);
            this.isOpen = false;
        }
    }
});;

/* File:  public-settings-panel-biketype.vue*/

Vue.component('public-settings-panel-biketype', {
    template: `
    <div class="row panel biketype-switch" :class="{hidden: hidden}">
        <div class="col-sm-12 text-center">
            <div class="biketype-tab type-own-bike" :class="{active: ownBike}">
                <div class="checkbox" style="position: relative; top: -2px;">
                    <label class="gray">
                        <input ref="ownBike" type="checkbox" v-on:change="toggle" :checked="ownBike" class="hidden">
                        {{ language['planner.bikes.I_USE'] }}
                    </label>
                </div>
            </div>
            <div class="biketype-tab type-bikesharing" :class="{active: bikesharing, hidden: ! parameters.components.bikeSharing}">
                <div class="checkbox" style="position: relative; top: -2px;">
                    <label class="gray">
                        <input ref="bikesharing" type="checkbox" v-on:change="toggle" :checked="bikesharing" class="hidden">
                        {{ language['planner.bikes.SHARED_BIKE'] }}
                    </label>
                    <img style="display: none; position: absolute; right: -20px; top: 0px;" src="/v2.5/img/rekola.png" height="25" width="25">
                </div>
            </div>
        </div>

        <div v-if=" ! bikesharing && parameters.components.bikeSelector" class="text-center">
            <a v-on:click="dataStorage.data.modeSelectorModal.show();" class="btn btn-link btn-biketype">{{ pickedVehicleTxt }}</a>
        </div>

        <div :class="{ hidden: ! bikesharing }" class="bikesharing-ico">
            <template v-for="(boolVal, provider) in providers">
                <div v-if="providerDetails[provider]" class="row colorizable" :class="{checked: providers[provider]}">
                    <div class="col-sm-2 text-center no-padding">
                        <img :src="operatorLogo(providerDetails[provider])" :alt="provider" class="ico margin-top-8 provider-ico">
                    </div>
                    <div class="col-sm-10 right-side">
                        <div class="checkbox">
                            <label class="gray">
                                {{ providerDetails[provider].operatorName }}
                                <input type="checkbox" v-on:change="providers[provider] = ! providers[provider]; onPick();">
                                <img :src="parameters.branding.images.icons.checked" alt="Checked" class="custom-checkbox checked">
                                <img src="/v2.5/img/resources/not-checked.svg" alt="Not checked" class="custom-checkbox not-checked">
                            </label>
                        </div>
                    </div>
                </div>
            </template>
        </div>
    </div>
    `,
    mounted: function(){
        dataStorage.data.publicSettingsBikeType = this;
    },
    data: function () {
        return {
            language: language,
            hidden: ! parameters.components.bikeSelector && ! parameters.components.bikeSharing,
            getPlans: window.getPlans,
            dataStorage: window.dataStorage,
            win: window,
            ownBike: true,
            bikesharing: false,
            pickedVehicleTxt: language['planner.bikes.MY_BIKE'],
            providers: {
                // rekola: false,
                // freebike: false,
            },
            providerDetails: {
                // rekola: false,
                // freebike: false,
            },
            styling: {
                default: { color: 'rgba(255,0,0,.5)', fillColor: 'rgba(255,0,0,.15)', },
                rekola: { color: 'rgba(241, 0, 123, .6)', fillColor: 'rgba(241, 0, 123, .10)', },
                freebike: { color: 'rgba(196, 251, 1, .9)', fillColor: 'rgba(0, 0, 0, .25)', },
            },
            win: window,
            parameters: window.parameters
        }
    },
    watch: {
        bikesharing: function(newVal){
            if ( newVal ) {
                this.dataStorage.bikesharing.show();
                // dataStorage.data.journeyBikeType.$refs.type.value = 'CITY_BIKE';
                dataStorage.data.modeSelectorModal.setVehicle('CITY_BIKE');
            } else {
                this.dataStorage.bikesharing.hide();
            } // end if-else
        },
    },
    methods: {
        toggle: function(){
            this.bikesharing = ! this.bikesharing;
            this.ownBike = ! this.bikesharing;
        },
        initBikesharingUpdate: function(){
            var that = this;
            this.win.mapboxMap.on('moveend', function(){
                if ( that.bikesharing ) {
                    // that.dataStorage.bikesharing.refresh();
                } // end if
            });
        },
        onPick() {
            this.dataStorage.bikesharing.refresh();
        },
        operatorLogo(provider) {
            if (provider.operatorLogoURL) return provider.operatorLogoURL;
            if (provider.operatorLogoUrl) return provider.operatorLogoUrl;
            
            return null;
        }
    }
});
;

/* File:  public-settings-panel-bikeselector.vue*/

Vue.component('public-settings-panel-bikeselector', {
    template: `
    <div class="row colorizable" id="bikeTypeSelector" :class="{hidden: hidden, checked: checked}">
        <div class="col-sm-10 col-sm-offset-2 right-side gray" style="padding-left: 5px;">
            <span class="tiny-descriptor">{{ language['planner.descriptors.bike_type'] }}</span>
        </div>
        <div class="col-sm-2 text-center no-padding">
            <img id="bikeicon" src="/img/search_settings/svg/bicycle.svg">
        </div>
        <div class="col-sm-10 right-side">
            <div class="checkbox" v-on:change="onCheck(this);" style="margin-top: 6px;">
                <label class="gray">
                    Electrically powered
                    <input class="hidden" id="bike_type_alt" type="checkbox" ref="checkbox">
                    <img :src="parameters.branding.images.icons.checked" alt="Checked" class="custom-checkbox checked">
                    <img src="/v2.5/img/resources/not-checked.svg" alt="Not checked" class="custom-checkbox not-checked">
                </label>
            </div>
            <select ref="type" id="bikeType" class="hidden form-control gray" v-on:change="onChange(this.value);">
                <option value="MOUNTAIN_BIKE">{{ language['planner.bikes.mountain_bike'] }}</option>    
                <option value="ELECTRIC_BIKE">{{ language['planner.bikes.electric_bike'] }}</option>
                <option value="CARGO_BIKE">{{ language['planner.bikes.cargo_bike'] }}</option>
            </select>
        </div>
    </div>
    `,
    mounted: function(){
        dataStorage.data.publicSettingsBikeSelector = this;
        // window.router.setBikeType('MOUNTAIN_BIKE');
    },
    data: function () {
        return {
            language: language,
            hidden: false,
            getPlans: window.getPlans,
            dataStorage: window.dataStorage,
            win: window,
            checked: false,
            parameters: window.parameters
        }
    },
    watch: {
        checked: function(newVal){
            if ( this.$refs.checkbox.checked != newVal ) {
                this.$refs.checkbox.checked = newVal;
            } // end if
        }
    },
    methods: {
        onChange: function(val){
            window.router.setBikeType(this.$refs.type.value);
            // getPlans();
        },
        onCheck: function(el){
            this.checked = this.$refs.checkbox.checked;
            if ( this.checked ) {
                window.router.setBikeType('ELECTRIC_BIKE');
            } else {
                window.router.setBikeType('MOUNTAIN_BIKE');
            } // end if-else
        }
    }
});;

/* File:  public-settings-panel-avoidtraffic.vue*/

Vue.component('public-settings-panel-avoidtraffic', {
    template: `
    <div class="row">
        <div class="col-xs-1 col-sm-1">
            <img src="/img/search_settings/svg/car.svg" class="margin-top-10">
        </div>
        <div class="col-xs-10 col-sm-11">
            <div class="checkbox" v-on:change="onChange(this);">
                <label class="gray">
                    <input id="avoid_traffic_checkbox" type="checkbox" ref="checkbox">
                    {{ language['planner.avoid.traffic'] }}
                </label>
            </div>
        </div>
    </div>
    `,
    mounted: function(){
        dataStorage.data.publicSettingsAvoidTraffic = this;
    },
    data: function () {
        return {
            language: language,
            hidden: true
        }
    },
    methods: {
        onChange: function(el){
            router.setAvoidTraffic(this.$refs.checkbox.checked);
            getPlans();
        }
    }
});;

/* File:  public-settings-panel-avoidstairs.vue*/

Vue.component('public-settings-panel-avoidstairs', {
    template: `
    <div class="row colorizable" :class="{checked: checked}">
        <div class="col-sm-2 text-center no-padding">
            <img src="/v2.5/img/resources/stairs.svg" class="margin-top-10 ico" alt="Stairs icon">
        </div>
        <div class="col-sm-10 right-side">
            <div class="checkbox" v-on:change="onChange(this);">
                <label class="gray">
                    {{ language['planner.avoid.stairs'] }}
                    <input id="avoid_stairs" type="checkbox" ref="checkbox">
                    <img :src="parameters.branding.images.icons.checked" alt="Checked" class="custom-checkbox checked">
                    <img src="/v2.5/img/resources/not-checked.svg" alt="Not checked" class="custom-checkbox not-checked">
                </label>
            </div>
        </div>
    </div>
    `,
    mounted: function(){
        dataStorage.data.publicSettingsAvoidStairs = this;
    },
    data: function () {
        return {
            language: language,
            checked: false,
            parameters: window.parameters
        }
    },
    watch: {
        checked: function(newVal){
            if ( this.$refs.checkbox.checked != newVal ) {
                this.$refs.checkbox.checked = newVal;
            } // end if
        }
    },
    methods: {
        onChange: function(el){
            this.checked = this.$refs.checkbox.checked;
            // router.setAvoidStairs(this.$refs.checkbox.checked);
            // getPlans();
        }
    }
});;

/* File:  public-settings-panel-avoidstairs-lvl.vue*/

Vue.component('public-settings-panel-avoidstairs-lvl', {
    template: `
    <div class="row scaleable" :class="">
        <div class="col-sm-2 text-center no-padding">
            <img src="/v2.5/img/resources/stairs.svg" class="margin-top-12 ico" alt="Fitness icon">
        </div>
        <div class="col-sm-10 right-side">
            <div class="scale">
                <label class="black">
                    {{ language['planner.avoid.stairs'] }}
                    <span class="editable" :data-lvl="lvl">
                        <img src="/v2.5/img/resources/minus.svg" alt="Minus" class="pointer lil-button" v-on:click="minus">
                        <img src="/v2.5/img/resources/lvl-1.svg" alt="lvl 1" class="custom-scale lvl-1">
                        <img src="/v2.5/img/resources/lvl-2.svg" alt="lvl 2" class="custom-scale lvl-2">
                        <img src="/v2.5/img/resources/lvl-3.svg" alt="lvl 3" class="custom-scale lvl-3">
                        <img src="/v2.5/img/resources/plus.svg" alt="Plus" class="pointer lil-button" v-on:click="plus">
                    </span>
                </label>
            </div>
        </div>
    </div>
    `,
    mounted: function(){
        dataStorage.data.publicSettingsAvoidStairs = this;
    },
    data: function () {
        return {
            language: language,
            lvl: 2,
        }
    },
    watch: {
        checked: function(newVal){
            if ( this.$refs.checkbox.checked != newVal ) {
                this.$refs.checkbox.checked = newVal;
            } // end if
        }
    },
    methods: {
        minus: function(){
            if ( this.lvl > 1 ) {
                --this.lvl;
            } // end if
        },
        plus: function(){
            if ( this.lvl < 3 ) {
                ++this.lvl;
            } // end if
        }
    }
});;

/* File:  public-settings-panel-avoidclimb.vue*/

Vue.component('public-settings-panel-avoidclimb', {
    template: `
    <div class="row">
        <div class="col-xs-1 col-sm-1 ">
            <img src="/img/search_settings/svg/mountain.svg" class="margin-top-10">
        </div>
        <div class="col-xs-10 col-sm-11">
            <div class="checkbox" v-on:change="onChange(this);">
                <label class="gray">
                    <input id="avoid_climbs_checkbox" type="checkbox" ref="checkbox">
                    {{ language['planner.avoid.climbs'] }}
                </label>
            </div>
        </div>
    </div>
    `,
    mounted: function(){
        dataStorage.data.publicSettingsAvoidClimb = this;
    },
    data: function () {
        return {
            language: language,
            hidden: true
        }
    },
    methods: {
        onChange: function(el){
            router.setAvoidClimbs(this.$refs.checkbox.checked);
            // todo
        }
    }
});;

/* File:  pois.vue*/

Vue.component('pois', {
    template: '<div id="pois" class="hidden" />',
    mounted: function(){
        dataStorage.data.pois = this;
    },
    data: function () {
        return {
            initialized: false,
            language: language,
            categories: {},
            pois: [],
            markers: [],
            polylines: [],
            win: window,
            fetching: false,
            hashMap: {},
            lastLatLng: undefined,
            frozen: false,
        }
    },
    methods: {
        init: function() {
            var that = this;
            that.fetchCategories(function() {
                // that.filter(function() {

                //     that.markers.forEach(marker => {
                //         marker.remove();
                //     });
                //     delete that.markers;
                //     that.markers = [];

                //     that.showAll();
                // });
            });
        },
        showAll: function(callObjectWithName = 'poiModal', label = 'planner.pois.add') {
            const that = this;
            var i = 0;
            this.pois.forEach(poi => {
                i = i + 1;

                if (i <= 50) {
                    if ('Point' == poi.geometry.type) {
                        let marker = L.marker(new L.latLng(poi.geometry.coordinates[1], poi.geometry.coordinates[0]), {
                            draggable: false,
                        });
                        marker.setIcon(L.icon({
                            iconUrl: poi.properties.markerUrl,
                            iconSize: [30, 30],
                            className: 'hover-darker poi-marker'
                        }));
                        
                        marker.on('click', function() {
                            const popup = that.buildPoiDetailPopup(poi, callObjectWithName, label);
                            popup.addTo(that.win.mapboxMap);
                        });
                    
                        marker.addTo(that.win.mapboxMap);
                        that.markers.push(marker);
                    } else if ('LineString' == poi.geometry.type) {
                        const coords = [];
                        poi.geometry.coordinates.forEach(point => {
                            coords.push(new L.latLng(point[1], point[0]));
                        });
                        const line = L.polyline(coords, {
                            color: poi.properties.strokeColor,
                            weight: poi.properties.strokeWidth,
                            opacity: poi.properties.strokeOpacity
                        });

                        line.on('click', function() {
                            const popup = that.buildPoiDetailPopup(poi, callObjectWithName, label);
                            popup.addTo(that.win.mapboxMap);
                        });
                        line.on('mouseover', function(e) { e.target.setStyle({ opacity: 1 }); });
                        line.on('mouseout', function(e) { e.target.setStyle({ opacity: poi.properties.strokeOpacity }); });

                        line.addTo(that.win.mapboxMap);
                        that.polylines.push(line);
                    } // end if-elseif
                } // end if
            });
        },
        refresh: function() {
            if (true == this.frozen) {
                return;
            } // end if

            var that = this;

            if ( ! this.initialized) {
                return this.init();
            } // end if

            // const center = this.win.markers[0] ? this.win.markers[0].getLatLng() : this.win.mapboxMap.getCenter();
            const center = this.win.mapboxMap.getCenter();

            if (this.lastLatLng === center) {
                return;
            } else {
                if (center) this.lastLatLng = center;
            } // end if-else

            // this.clearMarkers();
            // this.markers.forEach(marker => {
            //     marker.remove();
            // });
            // delete that.markers;
            // that.markers = [];

            // this.clearPolylines();
            // this.polylines.forEach(line => {
            //     line.remove();
            // });
            // delete that.polylines;
            // that.polylines = [];

            that.filter(function() {
                that.clearMarkers();
                that.clearPolylines();
                that.showAll();
            });
        },
        clearMarkers: function() {
            var that = this;

            this.markers.forEach(marker => {
                marker.remove();
            });
            delete that.markers;
            that.markers = [];
        },
        clearPolylines: function() {
            var that = this;

            this.polylines.forEach(line => {
                line.remove();
            });
            delete that.polylines;
            that.polylines = [];
        },
        fetchCategories: function(onDone) {
            var that = this;
            this.fetching = true;
            axios.get('/poi-categories/').then(function (res) {
                for (let i = 0; i < res.data.length; i++) {
                    const cat = res.data[i];
                    that.categories[cat.id] = cat;
                } // end for
                that.fetching = false;
                that.initialized = true;
                if (onDone) onDone();
            });
        },
        filter: function(onDone) {
            var that = this;
            // const center = this.win.markers[0] && this.win.markers[0].getLatLng() ? this.win.markers[0].getLatLng() : this.win.mapboxMap.getCenter();
            const center =  this.win.mapboxMap.getCenter();
            let url = `/pois/?cats=${this.parseCategories().join(',')}&ll=${center.lng},${center.lat}`;
            this.fetching = true;
            axios.get(url).then(function(res) {
                res.data = that.sort(res.data);
                that.pois = res.data;
                that.fetching = false;
                if (onDone) onDone();
            });
            
        },
        parseCategories: function() {
            let res = [];
            for (let [key, cat] of Object.entries(this.categories)) {
                if (cat.groupId == 'pois') {
                    res.push(cat.id);
                } // end if
            } // end for
            return res;
        },
        open: function(poi, isClose) {

            var that = this;

            poi.active = true;
            for (let i = 0; i < this.pois.length; i++) {
                if (this.pois[i].properties.id == poi.properties.id) {
                    this.pois[i].active = (isClose ? undefined : true);
                } else {
                    this.pois[i].active = undefined;    
                } // end if-else
            } // end for

            if (isClose) {
                return;
            } // end if

            let url = `${parameters.api.poi.replace('{id}', poi.properties.id)}`;
            axios.get(url).then(function(res) {
                that.detail = res.data;
                that.detailPicked = false;
                that.$forceUpdate();
            });
        },
        pick: function(poi) {
            dataStorage.data.journeyTypePois.pois.push({
                lat: poi.geoJSONFeature.geometry.coordinates[1], 
                lon: poi.geoJSONFeature.geometry.coordinates[0], 
                name: poi.name,
            });
            dataStorage.data.journeyTypePois.uniquePois();
            dataStorage.data.journeyTypePois.refreshMarkers();
            this.detailPicked = true;
        },
        prettyDistance: function(poi) {
            const center = this.win.markers[0] && this.win.markers[0].getLatLng() ? this.win.markers[0].getLatLng() :  this.win.mapboxMap.getCenter();
            let distance = center.distanceTo(new L.latLng(poi.geometry.coordinates[1], poi.geometry.coordinates[0])) / 1000;

            distance = distance.toFixed(distance < 1 ? 2 : 0);
            return distance;
        },
        sort: function(pois) {
            // const center = this.win.markers[0] && this.win.markers[0].getLatLng() ? this.win.markers[0].getLatLng() :  this.win.mapboxMap.getCenter();
            const center = this.win.mapboxMap.getCenter();
            pois.sort((a,b) => {
                let distanceToA = center.distanceTo(new L.latLng(a.geometry.coordinates[1], a.geometry.coordinates[0]));
                let distanceToB = center.distanceTo(new L.latLng(b.geometry.coordinates[1], b.geometry.coordinates[0]));
                if (distanceToA < distanceToB) return -1;
                if (distanceToA > distanceToB) return 1;
                return 0;
            });
            return pois;
        },
        buildPoiDetailPopup(poi, callObjectWithName, label) {
            const that = this;

            var center = null;
            if ('Point' == poi.geometry.type) {
                center = new L.latLng(poi.geometry.coordinates[1], poi.geometry.coordinates[0]);
            } else {
                center = new L.latLng(poi.geometry.coordinates[0][1], poi.geometry.coordinates[0][0]);
            } // end if-else

            const popup = L.popup()
            .setLatLng(center)
            .setContent('<p class="_gray">'+that.language['planner.just_a_sec']+'...</p>');

            const detailUrl = `${parameters.api.poi.replace('{id}', poi.properties.id)}`;
            axios.get(detailUrl).then(res => {
                let randId = get_random_string();
                that.hashMap[randId] = res.data;
                let o = '';

                o += `<div class="poi-detail-wrapper">`;

                o += `    <div class="poi-detail">`;
                o += `        <div class="poi-detail-inner">`;
                o += `            <h3 class="h4">${res.data.name}</h3><br />`;
                
                if (res.data.photoUrl) {
                    o += `            <img src="${res.data.photoUrl}" alt="${res.data.name}" class="poi-detail-img" />`;    
                } // end if

                o += `            <p>`;
                if (res.data.description) {
                    o += res.data.description;    
                }
                if (res.data.phone) {
                    o += ` <span><br /><i class="fa fa-phone"></i> <a href="tel:${res.data.phone}">${res.data.phone}</a></span>`;    
                } // end if
                if (res.data.webUrl) {
                    o += ` <span><br /><a target="_blank" href="${0 == res.data.webUrl.indexOf('http') ? res.data.webUrl : 'http://' + res.data.webUrl}">${res.data.webUrl}</a></span>`;
                } // end if
                
                o += `            </p>`;
                o += `            <hr />`;
                o += `            <p class="small text-center">`;
                o += `                <span class="likes badge">${res.data.upvotes.length} ${language['planner.mapobject.likes']}</span>`;
                o += `                <span class="dislikes badge">${res.data.downvotes.length} ${language['planner.mapobject.dislikes']}</span>`;
                o += `                <span class="comments badge ${res.data.comments.length > 0 ? 'has-comments' : 'no-comments'}" onclick="${res.data.comments.length ? 'this.closest(\'.poi-detail-inner\').querySelector(\'#comments\').classList.remove(\'hidden\'); return false;' : ''}">${res.data.comments.length} ${language['planner.mapobject.comments']}</span>`;
                o += `            </p>`;
                
                if (res.data.comments.length > 0) {
                    o += `<ul class="hidden" id="comments">`;
                    res.data.comments.forEach(item => {
                        o += `<li class="one-comment">${item.comment}</li>`;
                    });
                    o += `</ul>`;
                }

                o += `                <p class="text-center">`;
                o += `                    <button style="padding: 6px 12px; border-radius: 3px; margin-top: 10px;" class="btn btn-primary btn-sm" onclick="dataStorage.data.${callObjectWithName}.pick(dataStorage.data.pois.hashMap['${randId}']);">`;
                o += `                        ${that.language[label]}`;
                o += `                    </button>`;
                o += `                </p>`;
                o += `            </div>`;
                o += `        </div>`;
                o += `</div>`;
                // Fetch html (detail) content
                // Add button which will add poi to pois list 
                popup.setContent(o);
            });

            return popup;
        }
    }
});;

/* File:  poi-modal.vue*/

Vue.component('poi-modal', {
    template: `
    <div id="poi-modal" class="poi-modal modal-hide-footer" :class="{fetching: fetching}">
        <modal v-if="display" v-on:close="display = false">
            <div slot="header">
                <b>What would you like to visit?</b>
            </div>
            <div slot="body">
                <div class="col-xs-3 categories-list hidden">
                    <button style="padding-top: 0px;" v-on:click="toggleCategory(category)" v-for="category in categories" :data-id="category.id" class="btn btn-sm btn-group" :class="category.active ? 'btn-primary' : 'btn-secondary'"><i class="fa fa-check"></i> {{ category.name }}</button>
                </div>
                <div class="col-xs-12">
                    <div class="form-group">
                        <input ref="q" type="text" class="form-control poi-filter" v-on:change="filter()" v-on:keyup.enter="filter()" :placeholder="language['poi.modal.pladeholder']" />
                    </div>

                    <div class="poi-list">
                        <span class="poi-spinner"><i class="fa fa-refresh fa-spin"></i></span>
                        <div v-for="poi in pois" class="one-poi-v2" v-on:click="open(poi, poi.active);" :class="(undefined !== poi.active && true === poi.active) ? 'active' : ''">
                            <img :src="poi.properties.markerUrl" alt="Icon" width="25" height="25" />
                            {{ poi.properties.name }}
                            <span class="dimmed">{{ prettyDistance(poi) }} km</span>
                            <div v-if="poi.active" class="poi-detail-wrapper">

                                <div v-if="null !== detail" class="poi-detail">
                                    <div class="poi-detail-inner" :class="{picked: detailPicked}">
                                        
                                        <img v-if="detail.photoUrl" :src="detail.photoUrl" :alt="detail.name" class="poi-detail-img" />

                                        <p>
                                            {{ detail.description }}
                                            <span v-if="detail.phone"><br /><i class="fa fa-phone"></i> <a :href="'tel' + detail.phone">{{ detail.phone }}</a></span>
                                            <span v-if="detail.webUrl"><br /><a target="_blank" :href=" 0 == detail.webUrl.indexOf('http') ? detail.webUrl : 'http://' + detail.webUrl ">{{ detail.webUrl }}</a></span>
                                        </p>

                                        <p class="text-center">
                                            <button style="padding: 6px 12px; border-radius: 3px; margin-top: 10px;" class="btn btn-primary btn-sm" v-on:click="pick(detail);">
                                                Přidat do plánu
                                            </button>
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                
            </div>
            <div slot="footer">
                <p class="text-center">
                    
                </p>
            </div>
            <span slot="button">
                Continue
            </span>
        </modal>
    </div>
    `,
    mounted: function(){
        dataStorage.data.poiModal = this;
        this.fetchCategories();
    },
    watch: {
        display: function(newVal) {
            if (newVal) {
                setTimeout(this.filter, 200);
            } // end if
        },
    },
    data: function () {
        return {
            language: language,
            display: false,
            groups: {},
            categories: {},
            pois: [],
            detail: null,
            win: window,
            fetching: false,
            detailPicked: false,
        }
    },
    methods: {
        fetchCategories: function() {
            var that = this;
            this.fetching = true;
            axios.get('/poi-categories/').then(function (res) {
                for (let i = 0; i < res.data.length; i++) {
                    const cat = res.data[i];
                    that.categories[cat.id] = cat;
                } // end for
                that.fetching = false;
            });
        },
        filter: function() {
            var that = this;
            const center = this.win.markers[0] && this.win.markers[0].getLatLng() ? this.win.markers[0].getLatLng() :  this.win.mapboxMap.getCenter();
            let url = `/pois/?q=${this.$refs.q.value}&cats=${this.parseCategories().join(',')}&ll=${center.lng},${center.lat}`;
            this.fetching = true;
            axios.get(url).then(function(res) {
                res.data = that.sort(res.data);
                that.pois = res.data;
                that.fetching = false;
                // if (undefined !== that.pois[0]) {
                //     that.open(that.pois[0]);
                // } // end if
            });
            
        },
        toggleCategory: function(category) {
            for (let [key, cat] of Object.entries(this.categories)) {
                if (cat.id == category.id) {
                    this.categories[key].active = (this.categories[key].active ? false : true);
                } // end if
            } // end for
            this.filter();
        },
        parseCategories: function() {
            let res = [];
            for (let [key, cat] of Object.entries(this.categories)) {

                if (cat.groupId == 'pois') {
                    res.push(cat.id);
                } // end if
            } // end for
            return res;
        },
        open: function(poi, isClose) {

            var that = this;

            poi.active = true;
            for (let i = 0; i < this.pois.length; i++) {
                if (this.pois[i].properties.id == poi.properties.id) {
                    this.pois[i].active = (isClose ? undefined : true);
                } else {
                    this.pois[i].active = undefined;    
                } // end if-else
            } // end for

            if (isClose) {
                return;
            } // end if

            let url = `${parameters.api.poi.replace('{id}', poi.properties.id)}`;
            axios.get(url).then(function(res) {
                that.detail = res.data;
                that.detailPicked = false;
                that.$forceUpdate();
            });
        },
        pick: function(poi) {
            dataStorage.data.journeyTypePois.pois.push({
                lat: poi.geoJSONFeature.geometry.coordinates[1], 
                lon: poi.geoJSONFeature.geometry.coordinates[0], 
                name: poi.name,
            });
            dataStorage.data.journeyTypePois.uniquePois();
            dataStorage.data.journeyTypePois.refreshMarkers();
            this.detailPicked = true;
        },
        prettyDistance: function(poi) {
            const center = this.win.markers[0] && this.win.markers[0].getLatLng() ? this.win.markers[0].getLatLng() :  this.win.mapboxMap.getCenter();
            let distance = center.distanceTo(new L.latLng(poi.geometry.coordinates[1], poi.geometry.coordinates[0])) / 1000;

            distance = distance.toFixed(distance < 1 ? 2 : 0);
            return distance;
        },
        sort: function(pois) {
            const center = this.win.markers[0] && this.win.markers[0].getLatLng() ? this.win.markers[0].getLatLng() :  this.win.mapboxMap.getCenter();
            pois.sort((a,b) => {
                let distanceToA = center.distanceTo(new L.latLng(a.geometry.coordinates[1], a.geometry.coordinates[0]));
                let distanceToB = center.distanceTo(new L.latLng(b.geometry.coordinates[1], b.geometry.coordinates[0]));
                if (distanceToA < distanceToB) return -1;
                if (distanceToA > distanceToB) return 1;
                return 0;
            });
            return pois;
        }
    }
});;

/* File:  planner-ui.vue*/

Vue.component('planner-ui', {
    template: `
    <div :class="{compact: compact}" id="planner-ui" class="planner-ui">
        <panel />
        <results />
        <graph-detail-panel />
    </div>
    `,
    mounted: function(){
        dataStorage.data.plannerUi = this;
    },
    data: function () {
        return {
            language: language,
            compact: false,
            win: window,
            root: document.documentElement,
        }
    },
    methods: {
        recalculateOffset: function() {
            let resultsPosX;
            if (dataStorage.data.panel.compact) {
                this.root.style.setProperty('--results-pos-x', '50px');
                resultsPosX = 50;
            } else {
                this.root.style.setProperty('--results-pos-x', '360px');
                resultsPosX = 360;
            } // end if
            
            this.root.style.setProperty('--trip-pos-x', (resultsPosX + 370).toFixed(0) + 'px');
            
            // var(--results-pos-x)
            // root.style.setProperty('--mouse-x', e.clientX + "px");
            //   root.style.setProperty('--mouse-y', e.clientY + "px");
        },
        hideSearchPanelForSmallScreens: function() {
            if (this.win.innerWidth <= 1280) {
                dataStorage.data.panel.compact = true;
                dataStorage.data.results.compact = false;
                this.recalculateOffset();
            } // end if
        },
    }
});;

/* File:  persona.vue*/

Vue.component('persona', {
    template: `
    <div class="persona pointer" id="persona" v-on:click="openModal" :class="{ \'mobile-visible\': mobileVisible }">
        <img class="border-radius-50" :src="personaConfig[activePersona].img" :alt="personaConfig[activePersona].title" />
    </div>
    `,
    mounted: function(){
        dataStorage.data.persona = this;
    },
    data: function(){
        let data = {
            mobileVisible: false,
            language: language,
            defaultPersona: 'first',
            personaConfig: {
                first: {
                    img: '/img/intermodal/persona/studentka.png',
                    title: 'Student',
                    desc: 'Morbi iaculis magna nunc',
                    config: [
                        'train', 'metro', 'tram', 'bus', 'bike', 'shared_bike',
                        'lots_of_walk',
                        'cheap_price'
                    ]
                },
                second: {
                    img: '/img/intermodal/persona/senior.png',
                    title: 'Senior',
                    desc: 'Aenean elementum enim',
                    config: [
                        'train', 'metro', 'tram', 'bus', 'taxi',
                        'less_walk',
                        'average_price'
                    ]
                },
                third: {
                    img: '/img/intermodal/persona/pracujici.png',
                    title: 'Office worker',
                    desc: 'Nunc a est non turpis',
                    config: [
                        'train', 'metro', 'tram', 'bus', 'bike', 'shared_bike', 'car',
                        'average_walk',
                        'average_price'
                    ]
                },
                fourth: {
                    img: '/img/intermodal/persona/businessman.png',
                    title: 'Businessman',
                    desc: 'Integer gravida scelerisque',
                    config: [
                        'train', 'metro', 'tram', 'bus', 'taxi', 'car',
                        'average_walk',
                        'max_price'
                    ]
                },
            },
            models: [
                'train', 'metro', 'tram', 'bus', 'taxi', 'bike', 'shared_bike', 'car',
                'less_walk', 'average_walk', 'lots_of_walk',
                'cheap_price', 'average_price', 'max_price'
            ]
        };
        data.activePersona = data.defaultPersona;
        return data;
    },
    watch: {
        activePersona: function(alias) {
            let config = this.personaConfig[alias].config;
            this.models.forEach(function(model){
                dataStorage.data.panel[model] = false;
            });
            config.forEach(function(item){
                dataStorage.data.panel[item] = true;
            });
        }
    },
    methods: {
        openModal: function(){
            dataStorage.data.modals.showPersonaModal = true;
        }
    }
});;

/* File:  panel.vue*/

Vue.component('panel', {
    template: `
    <div ref="panel" class="left-block" :class="{minimized: minimized, compact: compact}">
        <div class="if-not-compact">
            <geolocator />
            <journey-type-switch />
            <search-panel />
            <journey-type-pois />
            <journey-type-circuit />
            <trip-btn />
            <trip-panel />
            <public-settings-panel />
            <error-panel />
            <settings-panel />
            <button v-on:click="toggleCompact" class="btn btn-link toggle-compact" :class="{hidden: ! parameters.components.minimizePanels}"><i class="fa fa-angle-double-up" aria-hidden="true"></i></button>
        </div>
        <div class="if-compact" v-on:click="toggleCompact">
            <i class="fa fa-cog" aria-hidden="true"></i>
        </div>
    </div>
    `,
    mounted: function(){
        dataStorage.data.panel = this;
    },
    data: function () {
        return {
            language: language,
            minimized: false,
            compact: false,
            win: window,
            parameters: window.parameters,
        }
    },
    methods: {
        toggleCompact: function() {
            this.compact = ! this.compact;
            dataStorage.data.plannerUi.recalculateOffset();
        },
    }
});;

/* File:  pallete.vue*/

Vue.component('pallete', {
    template: `
    <div id="pallete" class="pallete panel" v-if="active" style="position: fixed; bottom: 50px; right: 3px; width: 250px; height: 50px; z-index: 1;">
        <div class="tools" :class="{initialized: (null !== selected)}">
            <div v-for="tool,key in tools" class="tool pointer" :class="{selected: key == selected}" v-on:click="paint(key)">
                <span class="tool-img">
                    <img :src="tool.image" alt="Tool" />
                </span>
                <span class="tool-desc">
                    {{ tool.description }}
                </span>
            </div>
        </div>
    </div>
    `,
    mounted: function () {
        dataStorage.data.pallete = this;
    },
    data: function () {
        return {
            pluginInstalled: false,
            doc: document,
            win: window,
            active: false,
            selected: null,
            tools: {
                point: { image: window.parameters.wwwroot + "/v2.5/img/point.svg", description: "Point" },
                line: { image: window.parameters.wwwroot + "/v2.5/img/heart.svg?v=32", description: "Line" },
                nogo: { image: window.parameters.wwwroot + "/v2.5/img/nogo.svg", description: "No-go" },
            },
            displayedLayer: null,
            displayedData: null,
            position: null, // Plugin instance
        }
    },
    watch: {
        selected(picked) {
            if ("line" === picked || "nogo" === picked) {
                this.win.mapboxMap.dragging.disable();
            } else {
                this.win.mapboxMap.dragging.enable();
            } // end if-else

            this.doc.body.dataset.brush = picked;
        }
    },
    methods: {
        isActive() {
            return this.active;
        },
        toggle() {
            if (this.active) {
                this.close();
            } else {
                this.open();
            } // end if-else
        },
        open() {
            if (!this.pluginInstalled) {
                this.installPlugin();
            } // end if

            this.active = true;
        },
        close() {
            this.active = false;
            this.selected = null;
            this.doc.body.dataset.painting = "no";
            this.clear();
        },
        clear() {
            if (null !== this.displayedLayer) {
                this.displayedLayer.remove();
            } // end if
        },
        paint(using) {
            if (this.selected === using) {
                this.selected = null;
            } else {
                this.selected = using;
                this.doc.body.dataset.painting = "yes";
                this.doc.body.dataset.brush = this.selected;

                this.clear();

                if ("line" == using || "nogo" == using) {
                    this.paintLine(using);
                } else {
                    this.paintPoint(using);
                } // end if-else
            } // end if-else
        },
        paintPoint(icon) {
            const self = this;

            this.win.mapboxMap.once("click", (ev) => {
                const marker = L.marker(ev.latlng, {
                    icon: L.icon({
                        iconUrl: self.win.parameters.wwwroot + `/v2.5/img/${icon}.svg`,
                        iconSize: [32, 32],
                        iconAnchor: [16, 16]
                    })
                });

                marker.addTo(self.win.mapboxMap);

                this.displayedLayer = marker;
                this.displayedData = ev.latlng;

                self.selected = null;
            });
        },
        paintLine(icon) {
            const self = this;

            const coords = [];

            const paint = function() {
                self.clear();
                const line = L.polyline(coords, {
                    color: ("line" == icon ? "#00F" : "#F00" ), 
                    weight: ("line" == icon ? 8 : 10 ),
                    className: "painted-line"
                }).addTo(self.win.mapboxMap);
                
                self.displayedLayer = line;
                this.displayedData = coords;
            }; // end function 

            const recorder = function(ev) {
                let lat = Math.round(ev.latlng.lat * 100000) / 100000;
                let lng = Math.round(ev.latlng.lng * 100000) / 100000;
                coords.push(L.latLng(lat, lng));
                paint();
            }; // end function 


            this.win.mapboxMap.once("mousedown", e => {
                self.win.mapboxMap.on('mousemove', recorder);
            });

            this.win.mapboxMap.once("mouseup", e => {
                self.win.mapboxMap.off("mousemove", recorder);
                self.selected = null;
            });
            
        },
        installPlugin() {
            let Position = L.Control.extend({
                _container: null,
                options: {
                    position: 'bottomleft'
                },

                onAdd: function (map) {
                    var latlng = L.DomUtil.create('div', 'mouseposition');
                    this._latlng = latlng;
                    return latlng;
                },

                updateHTML: function (lat, lng) {
                    var latlng = lat + " " + lng;
                    //this._latlng.innerHTML = "Latitude: " + lat + "   Longitiude: " + lng;
                    this._latlng.innerHTML = "LatLng: " + latlng;
                }
            });
            this.position = new Position();
            this.win.mapboxMap.addControl(this.position);
        }
    }
});
;

/* File:  modals.vue*/

Vue.component('modals', {
    template: `
        <div>
            <modal v-if="showFeedbackModal" v-on:close="showFeedbackModal = false">
                <div slot="header">
                    <b>{{ language['transport.feedback_header'] }}</b>
                </div>
                <div slot="body">
                    <form v-on:submit.prevent="submit">
                        <div class="row">
                            <div class="col-sm-6">
                                <label>{{ language['transport.feedback_name'] }}</label>
                                <input required type="text" ref="who" class="form-control" :disabled="sent">
                            </div>
                            <div class="col-sm-6">
                                <label>{{ language['transport.feedback_email'] }}</label>
                                <input required type="email" ref="email" class="form-control" :disabled="sent">
                            </div>
                            <div class="col-sm-12">
                                <label>{{ language['transport.feedback_msg'] }}</label>
                                <textarea required rows="4" class="form-control" ref="msg" :disabled="sent"></textarea>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-sm-12 text-center">
                                <button style="margin-top: 15px; width: 100px;" class="btn btn-warning btn-submit" :disabled="sent">{{ language['transport.feedback_submit'] }}</button>
                            </div>                
                        </div>
                    </form>
                    <div class="col-xs-12 text-center" v-if="sent">
                        <small class="green">{{ language['transport.feedback_sent'] }}</small>
                    </div>
                </div>
                <template slot="button">
                    {{ language['transport.close'] }}
                </template>
            </modal>
            <modal v-if="showShareModal" v-on:close="showShareModal = false">
                <div slot="header">
                    <b>{{ language['transport.share_header'] }}</b>
                </div>
                <div slot="body">
                    <p class="gray">{{ language['transport.share_howto'] }}</p>
                    <div class="input-group">
                        <input readonly="readonly" type="text" class="form-control" :value="shareUrl" ref="shareUrl" v-bind:class="{ copySuccess: copySuccess, copyFailure: copyFailure }">
                        <div class="input-group-addon right-addon">
                            <button v-on:click="copyToClipboard" type="button" tabindex="-1" class="addon-button"><i class="fa fa-clipboard" aria-hidden="true"></i></button>
                        </div>
                    </div>
                </div>
                <div slot="footer"></div>
            </modal>
            <modal v-if="showPersonaModal" v-on:close="showPersonaModal = false">
                <div slot="header">
                    <b>{{ language['persona.modal.title'] }}</b>
                </div>
                <div slot="body" class="persona-modal">
                    <div v-for="persona, alias in personas" class="one-persona pointer" v-on:click="pickPersona(alias);" :class="{active: alias == dataStorage.data.persona.activePersona}">
                        <div class="left">
                            <img class="border-radius-50" :src="persona.img" alt="Persona 1" />
                        </div>
                        <div class="right">
                            <div class="persona-type">{{ persona.title }}</div>
                            <div class="persona-desc">{{ persona.desc }}</div>
                        </div>
                    </div>
                </div>
                <div slot="footer"></div>
            </modal>
        </div>
    `,
    mounted: function(){
        dataStorage.data.modals = this;
    },
    data: function(){
        return {
            language: language,
            parameters: parameters,

            showFeedbackModal: false,
            sent: false,

            showShareModal: false,
            shareUrl: '',
            copySuccess: false,
            copyFailure: false,

            showPersonaModal: false,
            personas: [],
            dataStorage: dataStorage
        };
    },
    methods: {
        showFeedback: function(){
            this.showFeedbackModal = true;
            if ( this.sent ) {
                this.sent = false;
                // this.$refs.msg.value = '';
            } // end if
        },
        submit: function(){
            if ( this.$refs.msg.value.length > 0 ) {
                this.sent = true;
                $.ajax({
                    url: '/feedback/',
                    method: 'POST',
                    data: {
                        who: this.$refs.who.value,
                        email: this.$refs.email.value,
                        msg: this.$refs.msg.value,
                    }
                }); // end ajax
            } // end if
        },
        fillShareModal: function(){
            var that = this;

            this.shareUrl = window.location.toString();
            
            setTimeout(function(){
                that.$refs.shareUrl.select();
            }, 250);
        },
        copyToClipboard: function(){
            var isIos = navigator.userAgent.match(/ipad|ipod|iphone/i);
            if ( isIos ) {
                this.$refs.shareUrl.readOnly = false;
                this.$refs.shareUrl.contentEditable = true;
                
                var range = document.createRange();
                range.selectNodeContents(this.$refs.shareUrl);
                
                var s = window.getSelection();
                s.removeAllRanges();
                s.addRange(range);
                
                this.$refs.shareUrl.setSelectionRange(0, 9999);
            } else {
                this.$refs.shareUrl.select();
            } // end if-else
            
            try {
                document.execCommand('copy');
                this.copySuccess = true;
            } catch (e) {
                this.copyFailure = true;
            } // end try-catch
            
            if ( isIos ) {
                this.$refs.shareUrl.readOnly = true;
                this.$refs.shareUrl.contentEditable = false;
            } // end if
        },
        pickPersona: function(alias){
            dataStorage.data.persona.activePersona = alias;
            this.showPersonaModal = false;
        }
    }
});
;

/* File:  modal.vue*/

Vue.component('modal', {
    template: `
    <transition name="modal">
        <div class="modal-mask">
            <div class="modal-wrapper">
                <div class="modal-container">
                    <div class="modal-header">
                        <a @click.prevent="$emit('close')" href="#" class="modal-close">
                            <i class="fa fa-times" aria-hidden="true"></i>
                        </a>
                        <slot name="header">
                            Default header
                        </slot>
                        
                    </div>
                    <div class="modal-body row">
                        <slot name="body">
                            Default body
                        </slot>
                    </div>
                    <div class="modal-footer">
                        <slot name="footer">
                            Default footer
                        </slot>
                    </div>
                    <hr class="footer-separator" />
                    <div class="row btns-row">
                        <button class="modal-default-button btn btn-default" @click="$emit('close')">
                            <slot name="button">
                                Ok
                            </slot>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </transition>
    `
});;

/* File:  modal-ttfdetail.vue*/

Vue.component('modal-ttfdetail', {
    template: `
    <div class="modal fade" id="ttfdetail" tabindex="-1" role="dialog">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h2 class="modal-title">Upozorneni {{ language['planner.download.head'] }}</h2>
                </div>
                <div class="modal-body">

                    <div class="row">

                        <div class="col-sm-4 col-sm-offset-2">
                            <div class="ico">
                                <i class="fa fa-mobile fa-5x" aria-hidden="true"></i>
                            </div>
                            <p>{{ language['planner.download.skenQR'] }}</p>
                            <p>{{ language['planner.download.playstore'] }}</p>

                        </div>

                        <div class="col-sm-4">
                            <img id="qrcode" width="100%">
                        </div>

                    </div>

                    <div class="row m-b-15">
                        <div class="col-sm-8 col-sm-offset-2">
                            <p>{{ language['planner.download.gpx'] }}</p>
                        </div>
                    </div>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">{{ language['planner.common.close'] }}</button>
                    <!--<button type="button" class="btn btn-primary">Save changes</button>-->
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
    `,
    data: function () {
        return {
            language: language,
            userLevel: parameters.userLevel,
            parameters: parameters,
            lang: parameters.lang
        }
    },
});;

/* File:  modal-track-download.vue*/

Vue.component('modal-track-download', {
    template: `
    <div id="modal-track-download" class="modal-track-download">
        <modal v-if="display" v-on:close="display = false">
            <div slot="header">
                {{ language['planner.download.head'] }}
            </div>
            <div slot="body">
                <div class="col-sm-6 col-download col-download-left">
                    <h2 class="h2" v-html="language['planner.download.head']"></h2>
                    <p v-html="language['planner.download.skenQR'].replace('{{ appName }}', language['app_name'])"></p>
                    <p v-html="playstoreLink"></p>
                    <p class="text-center">
                        <img id="qrcode" :src="qrcode" width="100%" style="width: 207px; height: 207px; margin-top: 35px;">
                    </p>
                </div>

                <div class="col-sm-6 col-download col-download-right">
                    <h2 class="h2" v-html="language['planner.download.download_gpx']"></h2>
                    <p class="text-center">
                        <a :href="localGpxDownloadLink" style="margin-top: 20px;" class="btn btn-info btn-lg">{{ language['planner.download.download_gpx'] }} <i class="fa fa-download" aria-hidden="true"></i></a>
                    </p>
                </div>
            </div>
            <div slot="footer">
                <p class="text-center">
                    
                </p>
            </div>
            <span slot="button">
                Close
            </span>
        </modal>
    </div>
    `,
    mounted: function(){
        dataStorage.data.downloadModal = this;
    },
    data: function () {
        return {
            display: false,
            language: language,
            parameters: parameters,
            playstoreLink: unescape_lang(language['planner.download.playstore'].replace('{{ appName }}', language['app_name']).replace('{{ googlePlayId }}', parameters.identifiers.googleplay).replace('{{ appStoreId }}', parameters.identifiers.appstore)),
            qrcode: null,
            gpxDownloadLink: null,
            win: window,
        }
    },
    methods: {
        show: function(planId){
            let wwwroot = parameters.qr_base ? parameters.qr_base : `${parameters.wwwroot}/plan`;
            
            // HACK: Issue CC-3011
            // wwwroot = wwwroot.replace('cyclers.app/plan', 'urbancyclers.com');

            this.qrcode = `https://api.qrserver.com/v1/create-qr-code/?data=` + encodeURIComponent(`${wwwroot}/#responseId=${this.win.router.getLastResponseHash()}`);
            this.gpxDownloadLink = this.win.router.backendUrl + '/gpx/' + this.win.router.getLastResponseHash() + '/' + planId;
            this.localGpxDownloadLink = `/download/gpx/?src=${this.gpxDownloadLink}`;
            this.display = true;
        }
    }
});;

/* File:  modal-proposed-changes.vue*/

Vue.component('modal-proposed-changes', {
    template: `
    <div class="modal-proposed-changes" id="modal-proposed-changes">
        <modal v-if="display" v-on:close="display = false">
            <div slot="header">
                Map edits
            </div>
            <div slot="body">
                <div class="modal-row">
                    <table class="table table-borderless" v-if="feature">
                        <thead>
                            <tr>
                                <td class="first"></td>
                                <th class="second">Current state<br /><small class="thin">(before)</small></th>
                                <th class="third">Proposed change<br /><small class="thin">(after)</small></th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <th class="first">Surface</th>
                                <td class="second">{{ feature.properties.surface }}</td>
                                <td class="third">
                                    <select ref="surface" class="form-control">
                                        <option value="EXCELLENT" :selected="feature.properties.surface == 'EXCELLENT'">EXCELLENT</option>
                                        <option value="GOOD" :selected="feature.properties.surface == 'GOOD'">GOOD</option>
                                        <option value="INTERMEDIATE" :selected="feature.properties.surface == 'INTERMEDIATE'">INTERMEDIATE</option>
                                        <option value="BAD" :selected="feature.properties.surface == 'BAD'">BAD</option>
                                        <option value="HORRIBLE" :selected="feature.properties.surface == 'HORRIBLE'">HORRIBLE</option>
                                        <option value="IMPASSABLE" :selected="feature.properties.surface == 'IMPASSABLE'">IMPASSABLE</option>
                                    </select>
                                </td>
                            </tr>
                            <tr v-if="isAdmin()">
                                <th class="first">Slope</th>
                                <td class="second">{{ feature.properties.slope }}</td>
                                <td class="third"><input ref="slope" type="number" :value="feature.properties.slope" step="0.01" class="form-control"></td>
                            </tr>
                            <tr v-if="isAdmin()">
                                <th class="first">Traffic</th>
                                <td class="second">{{ feature.properties.stress }}</td>
                                <td class="third"><input ref="stress" type="number" :value="feature.properties.stress" step="1" class="form-control"></td>
                            </tr>
                            <tr>
                                <th class="first">Is Blocked</th>
                                <td class="second">{{ feature.properties.blocker }}</td>
                                <td class="third">
                                    <select ref="blocker" class="form-control">
                                        <option value="true" :selected="feature.properties.blocker == true">Yes</option>
                                        <option value="false" :selected="feature.properties.blocker == false">No</option>
                                        <option value="third" :selected="feature.properties.blocker == 'wut'">Only for road bikes</option>
                                    </select>
                                </td>
                            </tr>
                            <tr>
                                <th class="first">Length</th>
                                <td class="second">{{ feature.properties.length }}</td>
                                <td class="third">{{ feature.properties.length }}</td>
                            </tr>
                        </tbody>
                        
            
                    </table>
                </div>
            </div>
            
            <div slot="footer">
            </div>

            <span slot="button" class="btn btn-success" v-on:click="submit()">
                Submit proposed changes
            </span>
        </modal>
    </div>
    `,
    mounted: function () {
        dataStorage.data.proposedChangesModal = this;
    },
    data: function () {
        return {
            display: false,
            language: language,
            userLevel: parameters.userLevel,
            parameters: parameters,
            lang: parameters.lang,
            feature: null,
            win: window
        }
    },
    methods: {
        show: function () {
            this.display = true;
        },
        hide: function () {
            this.display = false;
        },
        cancel() {
            this.hide();
        },
        submit() {
            let blocker = undefined;
            if ("true" === this.$refs.blocker.value) {
                blocker = true;
            } else if ("false" === this.$refs.blocker.value) {
                blocker = false;
            } else if ("wut" === this.$refs.blocker.value) {
                blocker = -1;
            } // end if-elseif-else

            const payload = {
                proposal: {
                    feature: {
                        properties: {
                            from: this.feature.properties.from,
                            to: this.feature.properties.to,
                            surface: this.feature.properties.surface,
                            stress: this.feature.properties.stress,
                            slope: this.feature.properties.slope,
                            blocker: this.feature.properties.blocker,
                        },
                    },
                    proposedChanges: {
                        properties: {
                            surface: this.$refs.surface.value,
                            stress: parseInt(this.$refs.stress.value),
                            slope: parseFloat(this.$refs.slope.value),
                            blocker: blocker,
                        }
                    },
                    proposedBy: dataStorage.data.userProfile.getUser().uid
                }
            };
            console.log(payload);

            axios.post("/", payload).then(res => {});
            
            alert("Successfully did nothing. Thanks bro!");
        },
        isAdmin() {
            return dataStorage.data.userProfile.isAdmin();
        },
    }
});;

/* File:  modal-plan-feedback.vue*/

Vue.component('modal-plan-feedback', {
    template: `
    <div id="modal-plan-feedback">
        <modal v-if="display" v-on:close="display = false" class="modal-plan-feedback">
            <div slot="header">
                <b>{{ language['planner.rating.head'] }}</b>
            </div>
            <div slot="body">
                <form name="planFeedback" id="planFeedback">
                    <div class="form-group">
                        <label style="display: block; clear: both">{{ language['planner.rating.howLike'] }}</label>
                        <div class="stars" style="margin: auto">
                            <input class="star star-5" id="star-5" type="radio" name="rating"/>
                            <label class="star star-5" for="star-5"></label>
                            <input class="star star-4" id="star-4" type="radio" name="rating"/>
                            <label class="star star-4" for="star-4"></label>
                            <input class="star star-3" id="star-3" type="radio" checked name="rating"/>
                            <label class="star star-3" for="star-3"></label>
                            <input class="star star-2" id="star-2" type="radio" name="rating"/>
                            <label class="star star-2" for="star-2"></label>
                            <input class="star star-1" id="star-1" type="radio" name="rating"/>
                            <label class="star star-1" for="star-1"></label>
                        </div>
                    </div>

                    <label style="display: block; clear: both">{{ language['planner.rating.markIssues'] }}</label>
                    <div class="checkbox">
                        <label>
                            <input type="checkbox" value="true" name="forbiddenManoeuvers">
                            <span>{{ language['planner.rating.forbidMan.head'] }}</span>
                            <small>- {{ language['planner.rating.forbidMan.sample'] }}</small>
                        </label>
                    </div>
                    <div class="checkbox">
                        <label>
                            <input type="checkbox" value="true" name="badProfileCorrespondence">
                            <span>{{ language['planner.rating.notprofile.head'] }}</span>
                            <small>- {{ language['planner.rating.notprofile.sample'] }}</small>
                        </label>
                    </div>
                    <div class="checkbox">
                        <label>
                            <input type="checkbox" value="true" name="dangerousPlaces">
                            <span>{{ language['planner.rating.danger.head'] }}</span>
                            <small>- {{ language['planner.rating.danger.sample'] }}</small>
                        </label>
                    </div>
                    <div class="checkbox">
                        <label>
                            <input type="checkbox" value="true" name="pavementWhenNotNeeded">
                            <span>{{ language['planner.rating.pavement.head'] }}</span>
                            <small>- {{ language['planner.rating.pavement.sample'] }}</small>
                        </label>
                    </div>
                    <div class="checkbox">
                        <label>
                            <input type="checkbox" value="true" name="badMapData">
                            <span>{{ language['planner.rating.wrongmap.head'] }}</span>
                            <small>- {{ language['planner.rating.wrongmap.sample'] }}</small>
                        </label>
                    </div>

                    <textarea class="form-control" rows="3" id="textualFeedback" name="textualFeedback"
                        :placeholder="language['planner.rating.otherissues']"></textarea>
                </form>
            </div>
            <div slot="footer">
                <button v-on:click="submit" class="btn btn-primary btn-lg">
                    {{ language['planner.common.send'] }}
                </button>
            </div>
        </modal>
    </div>
    `,
    mounted: function () {
        dataStorage.data.planFeedbackModal = this;
    },
    data: function () {
        return {
            language: language,
            display: false,
            key: 'modal-plan-feedback',
            endpoint: 'http://uc1.umotional.net/cycle-now/v3/feedback',
        }
    },
    methods: {
        submit: function () {
            let data = {};
            let ratingId = document.querySelector('input[type=radio][name=rating]:checked').getAttribute('id');

            data.rating = ratingId.substr(ratingId.length - 1);
            data.responseId = router.getLastResponseHash();
            data.planId = painter.lastClickedPlan.order;
            data.textualFeedback = document.getElementById('textualFeedback').value;

            Array.from(document.querySelectorAll('form#planFeedback input[type="checkbox"]'), function (el) {
                data[el.getAttribute('name')] = el.checked;
            });

            axios.post(this.endpoint, data, {
                headers: {
                    'Content-Type': 'application/json; charset=utf-8'
                },
            }).then(res => {
                this.display = false;
                dataStorage.data.planFeedbackThanksModal.display = true;
            }).catch(res => {
                alert('Unexpected error while saving your response.');
            });
        },
    }
});
;

/* File:  modal-plan-feedback-thx.vue*/

Vue.component('modal-plan-feedback-thx', {
    template: `
    <div id="modal-plan-feedback-thx">
        <modal v-if="display" v-on:close="display = false" class="modal-plan-feedback-thx">
            <div slot="header">
                <b>{{ language['planner.rating.head'] }}</b>
            </div>
            <div slot="body">
                <p>{{ language['planner.common.thanks'] }}</p>
            </div>
            <span slot="button">
                {{ language['planner.common.close'] }}
            </span>
        </modal>
    </div>
    `,
    mounted: function () {
        dataStorage.data.planFeedbackThanksModal = this;
    },
    data: function () {
        return {
            language: language,
            display: false,
            key: 'modal-plan-feedback-thx',
        }
    },
    methods: {
        
    }
});
;

/* File:  modal-mode-selector.vue*/

Vue.component('modal-mode-selector', {
    template: `
    <div id="modal-mode-selector" class="modal-mode-selector" :data-walker="walker ? 'yes' : 'no'">
        <modal v-if="display" v-on:close="display = false">
            <div slot="header">
                <div v-html="altHeading ? language['planner.modeSelect.modal.header_alt'].replace('{{ appName }}', parameters.name) : language['planner.modeSelect.modal.header']">
                </div>
            </div>
            <div slot="body">
                <div class="modal-row mode-selector-wrapper">
                    <div class="section-header">{{ language['planner.modeSelect.type'] }}</div>
                    <button v-on:click="vehicleType = 'bicycle'" class="btn btn-link btn-vehicle-type left" :class="{active: 'bicycle' == vehicleType}">
                        {{ language['planner.modeSelect.bicycle'] }}
                    </button><button v-on:click="vehicleType = 'scooter'" class="btn btn-link btn-vehicle-type" :class="{active: 'scooter' == vehicleType, middle: walker, right: ! walker}">
                        {{ language['planner.modeSelect.scooter'] }}
                    </button><button v-if="walker" v-on:click="vehicleType = 'walk'" class="btn btn-link btn-vehicle-type right" :class="{active: 'walk' == vehicleType}">
                        {{ language['planner.modeSelect.walk'] }}
                    </button>
                </div>
                <div class="modal-row">
                    <div class="relative switch electric-switch pointer" v-on:click="electric = ! electric" :class="{active: electric, disabled: vehicleType == 'walk'}">
                        <span class="fa fa-bolt" aria-hidden="true"></span>
                        {{ language['planner.modeSelect.electric'] }}
                        <div class="toggle" :class="{on: electric && vehicleType != 'walk', off: ! electric || vehicleType == 'walk'}">
                        </div>
                    </div>
                </div>
                <div class="modal-row">
                    <div v-on:click="vehicle = item.id" v-if="item.type == vehicleType && (item.isElectric == electric || 'walk' == item.type)" v-for="item in vehicles" :class="{active: item.id == vehicle}" class="vehicle-box pointer">
                        <img :src="'/img/vehicles/' + item.id + '.png'" class="pic" :alt="item.id" />
                        <span class="name">
                            {{ language['planner.modeSelect.' + item.id] ? language['planner.modeSelect.' + item.id] : item.id }}
                        </span>
                    </div>
                </div>
            </div>
            
            <div slot="footer">
            </div>

            <span slot="button" v-on:click="pick">
                {{ language['planner.modeSelect.okay'] }}
            </span>
        </modal>
    </div>
    `,
    mounted: function () {
        dataStorage.data.modeSelectorModal = this;
    },
    data: function () {
        return {
            display: false,
            altHeading: false,
            language: language,
            parameters: parameters,
            win: window,
            vehicleType: 'bicycle', // bicycle | scooter | walk
            electric: false,
            walker: (parameters.components.walker !== undefined && true === parameters.components.walker),
            vehicle: 'CITY_BIKE',
            vehicles: [
                { id: 'ELECTRIC_BIKE', isElectric: true, type: 'bicycle' },
                { id: 'ELECTRIC_CITY_BIKE', isElectric: true, type: 'bicycle' },
                { id: 'ELECTRIC_ROAD_BIKE', isElectric: true, type: 'bicycle' },
                { id: 'ELECTRIC_HYBRID_BIKE', isElectric: true, type: 'bicycle' },
                { id: 'ELECTRIC_FOLDING_BIKE', isElectric: true, type: 'bicycle' },
                { id: 'ELECTRIC_GRAVEL_BIKE', isElectric: true, type: 'bicycle' },
                { id: 'ELECTRIC_CARGO_BIKE', isElectric: true, type: 'bicycle' },
                { id: 'ELECTRIC_FIXIE_BIKE', isElectric: true, type: 'bicycle' },
                { id: 'ELECTRIC_RECUMBENT_BIKE', isElectric: true, type: 'bicycle' },

                { id: 'CITY_BIKE', isElectric: false, type: 'bicycle' },
                { id: 'ROAD_BIKE', isElectric: false, type: 'bicycle' },
                { id: 'MOUNTAIN_BIKE', isElectric: false, type: 'bicycle' },
                { id: 'HYBRID_BIKE', isElectric: false, type: 'bicycle' },
                { id: 'FOLDING_BIKE', isElectric: false, type: 'bicycle' },
                { id: 'GRAVEL_BIKE', isElectric: false, type: 'bicycle' },
                { id: 'CARGO_BIKE', isElectric: false, type: 'bicycle' },
                { id: 'FIXIE_BIKE', isElectric: false, type: 'bicycle' },
                { id: 'RECUMBENT_BIKE', isElectric: false, type: 'bicycle' },

                { id: 'BIG_SCOOTER', isElectric: false, type: 'scooter' },
                { id: 'SCOOTER', isElectric: false, type: 'scooter' },
                { id: 'RUN', isElectric: false, type: 'walk' },
                { id: 'WALK', isElectric: false, type: 'walk' },

                { id: 'ELECTRIC_SCOOTER', isElectric: true, type: 'scooter' },
            ],
        }
    },
    methods: {
        show: function (altHeading = false) {
            this.altHeading = altHeading;
            this.display = true;
        },
        pick() {
            this.win.router.setBikeType(this.vehicle);
            dataStorage.data.publicSettingsBikeType.pickedVehicleTxt = this.language[`planner.bikes.${this.vehicle}`];
            this.pickSurface();
            this.pickClimbs();
            if (this.parameters.components.isochrones) {
                dataStorage.data.isochrones.getIsochrones();
            }
        },
        setVehicle(vehicleId) {
            const that = this;

            that.vehicle = vehicleId;

            this.vehicles.forEach(item => {
                if (vehicleId == item.id) {
                    that.electric = item.isElectric;
                    that.vehicleType = item.type;
                } // end if
            });

            this.pick();
        },
        pickSurface() {
            let lvl = 3; // prefer paved
            if (['ELECTRIC_BIKE', 'MOUNTAIN_BIKE'].indexOf(this.vehicle) >= 0) {
                lvl = 2; // prefer unpaved
            } else if ([
                'ROAD_BIKE', 'ELECTRIC_ROAD_BIKE', 'CARGO_BIKE', 'ELECTRIC_CARGO_BIKE',
                'SCOOTER', 'ELECTRIC_SCOOTER', 'RECUMBENT_BIKE', 'ELECTRIC_RECUMBENT_BIKE',
                'FIXIE_BIKE', 'ELECTRIC_FIXIE_BIKE'
            ].indexOf(this.vehicle) >= 0) {
                lvl = 4; // require paved
            } // end if-elseif-else

            dataStorage.data.publicSettingsSmooth.pick(lvl);
        },
        pickClimbs() {
            let lvl = 2; // avoid if reasonable
            if (this.vehicle.toLowerCase().indexOf('electric') >= 0) {
                lvl = 1; // ignore
            } else if (['CARGO_BIKE'].indexOf(this.vehicle) >= 0) {
                lvl = 3; // avoid if possible
            } // end if-elseif-else

            dataStorage.data.publicSettingsFlat.pick(lvl);
        }
    }
});;

/* File:  modal-login.vue*/

Vue.component('modal-login', {
    template: `
    <div class="modal fade" id="loginModal" tabindex="-1" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h2 class="modal-title">{{ language['planner.loginmodal.login'] }}</h2>
                </div>
                <div class="modal-body">
                    <div id="firebaseui-auth-container">
                        
                    </div>
                    <div id="loginDisclaimer">
                        <div class="row">
                            <div class="col-sm-offset-2 col-sm-8">
                                {{ language['planner.loginmodal.disclaimer'] }}
                            </div>
                        </div>
                    </div>
                </div>


                <div class="modal-footer">
                    <button type="button" class="btn btn-default"
                            data-dismiss="modal">{{ language['planner.common.close'] }}</button>
                </div>


            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
    `,
    data: function () {
        return {
            language: language,
            userLevel: parameters.userLevel,
            parameters: parameters,
            lang: parameters.lang
        }
    },
});;

/* File:  modal-feedback.vue*/

Vue.component('modal-feedback', {
    template: `
    <div class="modal fade" id="feedbackModal" tabindex="-1" role="dialog">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h2 class="modal-title">Zpětná vazba</h2>
                </div>
                <div class="modal-body">
                    <p>Děkujeme, že používáte aplikaci UrbanCyclers Plan. Rádi bychom Vás požádali o <a
                            href="http://goo.gl/forms/NFccaqToJ7" title="Zpětná vazba" target="_blank" class="black-link">zpětnou vazbu</a>.
                    </p>
                    <p>Váš<br>
                        Tým UrbanCyclers
                    </p>
                </div>
                <div class="modal-footer">
                    <a target="_blank" class="btn btn-primary" href="http://goo.gl/forms/NFccaqToJ7">Zpětná vazba</a>
                    <button type="button" class="btn btn-default" data-dismiss="modal">Později</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal"
                            onclick="increaseNumOfPlansToFeedback(1000000)">Nikdy
                    </button>
                    <!--<button type="button" class="btn btn-primary">Save changes</button>-->
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
    `,
    data: function () {
        return {
            language: language,
            userLevel: parameters.userLevel,
            parameters: parameters,
            lang: parameters.lang
        }
    },
});;

/* File:  modal-cities.vue*/

Vue.component('modal-cities', {
    template: `
    <div class="modal fade" id="citySelectModal" tabindex="-1" role="dialog">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h2 class="modal-title">{{ language['planner.selectCity.header'] }}</h2>
                </div>
                <div class="modal-body">
                    <div class="row stackedCols" id="cities">
                        
                    <div v-for="city in cities" class="col-sm-6 m-b-md">
                        <div @click="switchCity(city.slug)" class="city-button rounded" :style="{ backgroundImage: 'url(' + city.img + ')', backgroundSize: 'cover' }">
                            <div class="hover-appear text-center rounded" > 
                                <div style="display: table; height: 100%; width:100%">
                                    <div style="display:table-cell; vertical-align: middle; ">
                                        <h4>{{ language['planner.selectCity.callForSelect'] }}</h4></hr> <img class="ride-the-city-umo" src="/img/umo_white_logo.png" >
                                    </div>
                                </div>
                            </div>
                            <div class="text-center city-name" style="display: table; height: 100%; width:100%">
                                <div style="display:table-cell; vertical-align: middle;">
                                    <h3>{{ city.name }}</h3>
                                </div>
                            </div>
                        </div>
                    </div>


                   

                    </div>
                    <div class="row" >
                        <div class="col-xs-12 small gray">
                            Beta: These cities are running in Beta. Not all data sources have been integrated for Beta cities. The routing engine has only undergone basic configuration for Beta cities. Some features, in particular intermodal routing, may be missing in Beta cities.
                        </div>



                    </div>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">
                        {{ language['planner.common.close'] }}
                    </button>
                    <!--<button type="button" class="btn btn-primary">Save changes</button>-->
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
    `,
    data: function () {
        return {
            painter: painter,
            cities: dataStorage.data.cities,
            language: language,
            userLevel: parameters.userLevel,
            parameters: parameters,
            lang: parameters.lang
        }
    },
    methods: {
        switchCity: function(citySlug){
            window.painter.selectCity(citySlug);
        }
    }
});;

/* File:  modal-app.vue*/

Vue.component('modal-app', {
    template: `
    <div class="modal fade" id="appModal" tabindex="-1" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h2 class="modal-title">{{ language['planner.ios.head'] }}</h2>
                </div>
                <div class="modal-body">

                    <p>{{ language['planner.ios.text'] }}</p>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">{{ language['planner.common.close'] }}</button>
                    <!--<button type="button" class="btn btn-primary">Save changes</button>-->
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>

    `,
    data: function () {
        return {
            language: language,
            userLevel: parameters.userLevel,
            parameters: parameters,
            lang: parameters.lang
        }
    },
});;

/* File:  middle-panel.vue*/

Vue.component('middle-panel', {
    template: `
    <div class="middle-block" v-bind:class="{ visible: visible }">
        <button class="pointer btn-back" v-on:click="closeMe()"><i class="fa fa-angle-double-left"></i></button>
        <button class="pointer btn-share" v-on:click="showShareModal" :title="language['transport.share']"><i class="fa fa-share-alt"></i></button>
        
        <div class="journey-detail">
            <div ref="header" class="row header">
                <div class="first-row col-xs-12 text-center">
                    <b>{{ startTime }} - {{ endTime }}</b>
                </div>
                <div class="second-row col-xs-6 text-right">
                    <span v-if="stats && stats.cost" class="bold color-primary">{{ stats.cost.value }} <small>{{ stats.cost.currency }}</small></span>
                </div>
                <div class="second-row col-xs-6 text-left">
                    <span v-if="stats && stats.cost" class="bold color-primary">{{ duration }}</span>
                </div>
                <div class="second-row col-xs-12 text-center gray font-200">
                    {{ stats ? stats.discomfort : '-' }} discomfort,
                    <!--{{ 0 == transfers ? language['transport.wo_transfers'] : 1 == transfers ? '1 ' + language['transport.transfer'] : transfers + ' ' + language['transport.transfers']  }},-->
                    {{ stats ? stats.physicalEffortKj : '-' }} cal,
                    {{ stats ? stats.activeDistance : '-' }}m active
                    <span v-if="journeyData && journeyData.isDiscounted" class="color-orange font-200"><i class="fa fa-fire"></i> Discount</span>
                </div>
                <div ref="preview" class="preview" v-html="journeyPreview">
                </div>
            </div>

            <div ref="detail" class="detail">
                <ul class="journey">
                    
                    <template v-for="(leg, i) in legs">
                        <li class="odd" :class="modeClass(leg)">
                            <span v-if="0 == i" class="left gray text-center">{{ formatTime( date_obj(leg.start.dateTime) ) }}</span>
                            <span v-else class="left gray bold text-center">{{ formatTime( date_obj(leg.start.dateTime) ) }}</span>
                            <span class="center text-center" :class="{ 'has-content': leg.transportDetail.lineName || undefined == legs[i+1] || 0 == i }">
                                <i v-if="(0 != i) && (leg.transportDetail.lineName || undefined == legs[i+1] || 'walk' == leg.mode.toLowerCase() || 'shared_bike' == leg.mode.toLowerCase()) " class="fa fa-circle"></i>
                                <img v-else-if="0 == i" class="marker-icon" alt="marker icon" src="/img/intermodal/release/a_marker.png" width="15">
                                <span v-else>&nbsp;</span>
                            </span>
                            <div v-if="0 == i" class="right gray">                            
                                {{ origin }}
                                <div class="lightgray" :style="{'font-weight': '100'}" v-if="leg.stats && leg.stats.discomfort">{{leg.stats.discomfort}} diskomfort</div>
                                <small class="gray live" v-if="leg.dummyMap && leg.dummyMap.live"><img src="/img/intermodal/rss.svg" alt="rss">{{ leg.dummyMap.live }}</small>
                            </div>
                            <div v-else class="right bold gray">
                                {{ leg.steps[0].start.name }}
                                <div class="lightgray" :style="{'font-weight': '100'}" v-if="leg.stats && leg.stats.discomfort">{{leg.stats.discomfort}} diskomfort</div>
                                <small class="gray live" v-if="leg.dummyMap && leg.dummyMap.live"><img src="/img/intermodal/rss.svg" alt="rss">{{ leg.dummyMap.live }}</small>

                            </div>
                            <div class="clearer"></div>
                        </li>
                        <li class="even" :class="modeClass(leg)">
                            <span class="left gray text-center"><img class="" :src="'/img/intermodal/24/colored/' + leg.transportDetail.transportMode.toLowerCase() + '_color.png'"></span>
                            <span class="center text-center"><span>&nbsp;</span></span>
                            <div class="right gray">
                                {{ language['transport.type.'+leg.transportDetail.transportMode.toLowerCase()] }}
                                <span v-if="leg.transportDetail.lineName">{{ leg.transportDetail.lineName }}</span>
                                <span v-if="leg.operator && leg.operator.operatorName">{{ leg.operator.operatorName }}</span>

                                <br />

                                <template v-if="leg.showSteps">
                                    <template v-for="(step, j) in leg.steps">
                                        <div class="steps-switch" v-bind:class="{ expanded: step.expanded }">
                                            <a class="pointer" v-on:click="toggleExpanded(i, j)">
                                                <small>
                                                    {{ unitPrinter.toReadableTime(time_diff(step.start.dateTime, step.end.dateTime)) }} ({{ (step.via.length+1) + ' ' + language['transport.stops'] }})
                                                    <i class="fa fa-angle-double-down"></i>
                                                    <i class="fa fa-angle-double-up"></i>
                                                </small>
                                            </a>

                                            <div class="steps-wrapper">
                                                <ul class="steps">    
                                                    <li v-for="(via, k) in step.via">
                                                        <span class="gray">{{ via.name }}</span>
                                                        <span class="gray time">{{ formatTime(date_obj(via.dateTime)) }}</span>
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>
                                    </template>
                                </template>
                                <template v-else>
                                    <small>{{ unitPrinter.toReadableTime(time_diff(leg.start.dateTime, leg.end.dateTime)) }}<span v-if="leg.transportDetail.transportMode.toLowerCase() == 'shared_bike' || leg.transportDetail.transportMode.toLowerCase() == 'bike' || leg.transportDetail.transportMode.toLowerCase() == 'walk'">, {{ (leg.stats.distanceMeters/1000).toFixed(2) }} km</span></small>
                                </template>
                                
                            </div>
                            <div class="clearer"></div>
                        </li>
                    </template>

                    <li>
                        <span class="left gray text-center">{{ endTime }}</span>
                        <span class="center text-center"><img class="marker-icon" src="/img/intermodal/release/b_marker.png" width="15" alt="marker icon"></span>
                        <span class="right gray">{{ destination }}</span>
                    </li>
                </ul>
            </div>
        </div>
        <!--<div class="row bottom text-center">
            <img src="/img/intermodal/release/plan_detail_bottom_graphics.png" style="max-width: 90%;">
        </div>-->
    </div>
    `,
    mounted: function(){
        dataStorage.data.middlePanel = this;
    },
    data: function(){
        return {
            language: language,
            unitPrinter: new UnitPrinter(),
            time_diff: window.time_diff,
            formatTime: window.formatTime,
            date_obj: window.date_obj,
            visible: false,
            startTime: '--:--',
            endTime: '--:--',
            duration: '---',
            transfers: '---',
            journeyPreview: '',
            journey: null,
            journeyData: null,
            origin: '',
            destination: '',
            legs: [],
            stats: null,
        };
    },
    methods: {
        setVisible: function(visible){
            this.visible = visible;
            if ( visible ) {
                dataStorage.data.map.$refs.map.classList.add('shrinked');
            } else {
                dataStorage.data.map.$refs.map.classList.remove('shrinked');
            } // end if-else
            window.mapboxMap.invalidateSize();
            // dataStorage.data.map.shrinked = visible;
        },
        update: function(){
            this.startTime = this.journeyData.departure;
            this.endTime = formatTime(date_obj(this.journeyData.end.dateTime));
            this.duration = unitPrinter.toReadableTime(this.journeyData.duration);
            this.transfers = getNumOfTransfers(this.journeyData);
            this.journeyPreview = generateJourneyPreview(this.journeyData, true);
            this.origin = markers[0].htmlInputBox.querySelector('input').value;
            this.destination = markers[markers.length-1].htmlInputBox.querySelector('input').value;
            this.legs = this.journeyData.legs;
            this.stats = this.journeyData.stats;
            // dataStorage.data.mapSwitch.show();
            // console.log(this.legs);
        },
        redraw: function(){
            var that = this;
            if ( markers[0].getLatLng() && markers[markers.length-1].getLatLng() ) {
                var n = 0;
                var interval = setInterval(function(){
                    var activePlanIndex = get_active_plan_index();
                    if ( activePlanIndex !== undefined || n > 10 ) {
                        clearInterval(interval);
                        var activePlan = window.plansStorage[activePlanIndex];
        
                        that.journey = activePlan;
                        that.journeyData = activePlan._data;
                        that.update();
                        
                        that.setVisible(true);
                        recalculate();
                    } // end if
                }, 333);
                
            } else {
                that.setVisible(false);
            } // end if
        },
        toggleExpanded: function(i, j){
            this.legs[i].steps[j].expanded = this.legs[i].steps[j].expanded ? false : true;
        },
        modeClass: function(leg){
            return 'mode-' + leg.mode.toLowerCase();
        },
        closeMe: function(){
            this.setVisible(false);
            // dataStorage.data.mapSwitch.hide();
        },
        showShareModal: function(){
            dataStorage.data.modals.showShareModal = true;
            dataStorage.data.modals.fillShareModal();
        }
    }
});;

/* File:  markers-modal.vue*/

Vue.component('markers-modal', {
    template: `
    <div id="markers-modal" class="markers-modal modal-hide-footer" :class="{fetching: fetching}">
        <modal v-if="display" v-on:close="display = false">
            <div slot="header">
                <b>What would you like to visit?</b>
            </div>
            <div slot="body">
                <div class="col-xs-12">
                    <div class="poi-list" :list-id="componentVersion">
                        <div class="one-poi-v2" v-on:click="toggleWarnings()" :class="(showWarnings) ? 'active' : ''">
                            {{ language['planner.pois.warnings'] }}
                        </div>
                        <template v-for="category, i in categories">
                            <template v-if="0 == i || category.groupId != categories[i-1].groupId">
                                <div class="one-poi-subheading">
                                    {{ category.groupName }}
                                </div>
                            </template>
                            <div class="one-poi-v2" v-on:click="toggleCategory(category)" :class="(undefined !== category.active && true === category.active) ? 'active' : ''">
                                {{ category.name }}
                            </div>
                        </template>
                        
                    </div>
                </div>
                
                
            </div>
            <div slot="footer">
                <p class="text-center">
                    
                </p>
            </div>
            <span slot="button">
                Continue
            </span>
        </modal>
    </div>
    `,
    mounted: function(){
        var that = this;

        dataStorage.data.markersModal = this;
        this.fetchCategories();
    },
    watch: {
        display: function(newVal) {
            
        },
    },
    data: function () {
        return {
            language: language,
            display: false,
            showWarnings: true,
            // groups: {},
            categories: {},
            fetching: false,
            componentVersion: 0,
            win: window,
            doc: document,
            markers: [],
        }
    },
    methods: {
        fetchCategories: function() {
            var that = this;
            this.fetching = true;
            axios.get('/poi-categories/').then(function (res) {

                const cats = {};
                const list = [];
                Array.from(res.data).forEach(item => {
                    if (!cats[item.groupId]) cats[item.groupId] = [];
                    cats[item.groupId].push(item);
                });
                for (let [key, categories] of Object.entries(cats)) {
                    Array.from(categories).forEach(oneCategory => {
                        if (oneCategory.name !== null) {
                            list.push(oneCategory);    
                        } // end if
                    });
                } // end for

                for (let i = 0; i < list.length; i++) {
                    const cat = list[i];
                    // that.categories[cat.id] = cat;
                    that.categories[i] = cat;
                } // end for
                that.fetching = false;
            });
        },
        toggleCategory: function(category) {
            for (let [key, cat] of Object.entries(this.categories)) {
            // for (let [key, cat] of this.categories) {
                if (cat.id == category.id) {
                    this.categories[key].active = (this.categories[key].active ? false : true);
                } // end if
            } // end for
            this.componentVersion = ++this.componentVersion;
            this.updateMarkers();
        },
        toggleWarnings: function() {
            if ( this.showWarnings ) {
                this.doc.body.classList.add('hide-warnings');
            } else {
                this.doc.body.classList.remove('hide-warnings');
            } // end if-else

            this.showWarnings = ! this.showWarnings;
        },
        updateMarkers: function() {
            var that = this;
            const center = this.win.mapboxMap.getCenter();
            let cats = [];
            
            for (let key in this.categories) {
                if (this.categories[key].active) {
                    cats.push(this.categories[key].id);
                } // end if
            } // end for

            if (0 == cats.length) {
                // dataStorage.data.pois.clearMarkers();
                // dataStorage.data.pois.clearPolylines();
                dataStorage.data.pois.pois = [];
                return;
            } // end if

            let url = `/pois/?cats=${cats.join(',')}&ll=${center.lng},${center.lat}`;
            this.fetching = true;
            axios.get(url).then(function(res) {
                dataStorage.data.pois.clearMarkers();
                dataStorage.data.pois.clearPolylines();

                dataStorage.data.pois.pois = res.data;
                dataStorage.data.pois.showAll('markersModal', 'planner.pois.destination');
            });
        },
        pick: function(poi) {
            let coords = poi.geoJSONFeature.geometry.coordinates;
            dataStorage.data.journeyTypeSwitch.$refs.select.value = 'direct';
            dataStorage.data.journeyTypeSwitch.changeType();

            this.win.markers[this.win.markers.length - 1].setLatLng([coords[1], coords[0]]);
        }
    }
});
;

/* File:  map-switch.vue*/

Vue.component('map-switch', {
    template: `
    <div id="map-switch" :class="{ 'is-map': isMap, 'hidden': hidden }">
        <button v-on:click="toggle" class="show-map btn-warning btn-submit btn-map-switch"><i class="fa fa-map-o"></i></button>
        <button v-on:click="toggle" class="show-journey btn-warning btn-submit btn-map-switch"><i class="fa fa-list-ol"></i></button>
    </div>
    `,
    mounted: function(){
        dataStorage.data.mapSwitch = this;
    },
    data: function(){
        return {
            isMap: false,
            hidden: false,
            language: language,
        };
    },
    methods: {
        show: function(){
            this.hidden = false;
        },
        hide: function(){
            this.hidden = true;
        },
        toggle: function(){
            this.isMap = ! this.isMap;
            dataStorage.data.map.mobileVisible = ! dataStorage.data.map.mobileVisible;
            dataStorage.data.mapSwitch.mobileVisible = dataStorage.data.map.mobileVisible;
            dataStorage.data.persona.mobileVisible = dataStorage.data.map.mobileVisible;
        }
    }
});;

/* File:  map-spinner.vue*/

Vue.component('map-spinner', {
    template: `
    <div id="map-spinner" :class="{hidden: hidden}">
        <div class="spinner-overlay">
            <div class="spinner-inner>
                <i class="fa fa-spin fa-circle-o-notch"></i>
            </div>
        </div>
    </div>
    `,
    mounted: function(){
        dataStorage.data.mapSpinner = this;
    },
    data: function(){
        return {
            hidden: true
        };
    },
    methods: {
        show: function(){
            this.hidden = false;
        },
        hide: function(){
            this.hidden = true;
        }
    }
});;

/* File:  map-layers.vue*/

Vue.component('map-layers', {
    template: `
    <div id="map-layers" :class="{ \'mobile-visible\': mobileVisible }">
        <button :title="language['transport.toggle_bikes']" v-on:click="toggleBikes" class="toggle-bikes btn-warning btn-submit btn-map-switch"><i class="fa fa-bicycle"></i></button>
        <button :title="language['transport.toggle_parkings']" v-on:click="toggleVehicles" class="toggle-parkings btn-warning btn-submit btn-map-switch"><i class="fa fa-flag"></i></button>
    </div>
    `,
    mounted: function(){
        dataStorage.data.mapSwitch = this;
    },
    data: function(){
        return {
            language: language,
            bikesKey: 'bikeMarkers',
            parkingKey: 'parkingMarkers',
            parkingInterval: null,
            bikesInterval: null,
            mobileVisible: false,
        };
    },
    methods: {
        toggleBikes: function(){
            if ( window[this.bikesKey].length ) {
                clearInterval(this.bikesInterval);
                hide_generic_marker_layer(this.bikesKey);
            }
            else {
                this.bikesInterval = setInterval(this.refreshBikes, 30000);
                this.refreshBikes();
            }
        },
        refreshBikes: function(){
            var that = this;
            show_generic_marker_layer('https://jupiter.umotional.net:9003/intermodaljp/v1/layers/bikes', 'rekola.png', this.bikesKey, () => {
                hide_generic_marker_layer(that.bikesKey);
            }, (current) => {
                return '<span class="generic-marker-title">'+current.providerId+' ('+current.bikeName+')</span>';
            });
        },
        toggleVehicles: function(){
            if ( window[this.parkingKey].length ) {
                clearInterval(this.parkingInterval);
                hide_generic_marker_layer(this.parkingKey);
            } else {
                this.bikesInterval = setInterval(this.refreshParkings, 30000);
                this.refreshParkings();
            }
        },
        refreshParkings: function(){
            var that = this;
            show_generic_marker_layer('https://jupiter.umotional.net:9003/intermodaljp/v1/layers/parkings', 'p_plus_r.png', this.parkingKey, () => {
                hide_generic_marker_layer(that.parkingKey);
            }, (current) => {
                return '<span class="generic-marker-title">'+current.name+' ('+current.freeSlots+'/'+current.capacity+')</span>';
            });
        }
    }
});;

/* File:  main-menu.vue*/

Vue.component('main-menu', {
    template: `
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <div class="container-fluid">
            <div>
                <main-menu-left />
                <main-menu-right />
            </div>
        </div>
    </nav>
    `
});;

/* File:  main-menu-right.vue*/

Vue.component('main-menu-right', {
    template: `
    <ul class="nav navbar-nav navbar-right">
        <li v-if="parameters.menu.right.me.show" class="item-route-planner">
            <a href="#">
                <span>
                    {{ parameters.menu.right.me.label }}
                </span>
            </a>
        </li>
        <li v-for="item in parameters.menu.right.items" class="item-docs">
            <a :href="item.link" :class="item.class ? item.class : ''" :onclick="item.onclick ? item.onclick : false">
                <span v-html="item.label">
                </span>
            </a>
        </li>
        <li v-if="parameters.menu.right.highlighted.show" class="inverted item-analytics">
            <a :href="parameters.menu.right.highlighted.link">
                <span>
                    {{ parameters.menu.right.highlighted.label }}
                </span>
            </a>
        </li>
        <li v-if="parameters.components.userWidget">
            <user-profile />
        </li>
    </ul>
    `,
    data: function () {
        return {
            language: language,
            userLevel: parameters.userLevel,
            parameters: parameters,
            lang: parameters.lang
        }
    },
});;

/* File:  main-menu-left.vue*/

Vue.component('main-menu-left', {
    template: `
    <div ref="menu-left">
        <div v-if="parameters.menu.logo.show" class="navbar-header">
            <a class="navbar-brand" :href="parameters.wwwroot + '?autoInit=false'">
                <img :src="parameters.branding.images.logo" alt="Logo">
            </a>
        </div>
        <ul class="nav navbar-nav">
            <li v-if="parameters.menu.left.homepage.show" class="item-cycnav">
                <a aria-expanded="false" role="button" :href="parameters.menu.left.homepage.link + '?autoInit=false'">
                    <span v-if="parameters.menu.left.homepage.label[0]" class="left-part">{{ parameters.menu.left.homepage.label[0] }}</span>
                    <span v-if="parameters.menu.left.homepage.label[1]" class="right-part">{{ parameters.menu.left.homepage.label[1] }}</span>
                </a>
            </li>
            
            <li v-if="parameters.menu.left.back.show" class="item-overview">
                <a :href="parameters.menu.left.back.link">
                    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path fill-rule="evenodd" clip-rule="evenodd" d="M16 8C16 7.44772 15.5523 7 15 7L3.8 7L8.7 2.1C9.0866 1.7134 9.0866 1.0866 8.7 0.7C8.3134 0.313401 7.6866 0.313401 7.3 0.7L0.707106 7.29289C0.316582 7.68342 0.316583 8.31658 0.707107 8.70711L7.3 15.3C7.6866 15.6866 8.3134 15.6866 8.7 15.3C9.0866 14.9134 9.0866 14.2866 8.7 13.9L3.8 9L15 9C15.5523 9 16 8.55229 16 8Z" fill="#9DB2B0"/>
                    </svg>
                    <span>
                        {{ parameters.menu.left.back.label }}
                    </span>
                </a>
            </li>

            <li v-for="item in parameters.menu.left.items" class>
                <a :href="item.link" v-on="item.onclick ? { click: (event) => { win.eval(item.onclick); event.preventDefault(); return false; } } : {}">
                    <span v-html="item.label">
                    </span>
                </a>
            </li>

        </ul>
    </div>
    `,
    data: function(){
        return {
            cityPicker: false,
            cities: dataStorage.data.cities,
            currentCity: dataStorage.data.defaultCity.name,
            language: language,
            parameters: parameters,
            userLevel: parameters.userLevel,
            win: window
        };
    },
    methods: {
        setCurrentCity: function(city){
            this.currentCity = city;
        }
    },
    mounted: function(){
        dataStorage.data.menuLeft = this;
    }
});;

/* File:  last-stops.vue*/

Vue.component('last-stops', {
    template: `
    <div :class="{hidden: hidden}">
        <div id="last-stops" class="panel additional">
            <div v-if="stops.length" class="list">
                <p v-html="language['transport.recents']"></p>
                <ul class="recent-stops">
                    <li v-for="stop in stops.slice(0, 3)">
                        <a v-on:click="init(stop)" class="pointer" v-html="beautifyName(stop.name)"></a>
                    </li>
                </ul>
            </div>
            <div v-else class="empty">
                <p class="lightgray" v-html="language['transport.empty']"></p>
            </div>
        </div>
    </div>
    `,
    mounted: function(){
        dataStorage.data.lastStops = this;
    },
    data: function(){
        return {
            language: language,
            stops: this.loadStops(),
            parameters: parameters,
            lang: parameters.lang,
            hidden: true,
        };
    },
    methods: {
        loadStops: function(){
            var recents = this.fetch();
            return Array.isArray(recents) ? recents.reverse() : [];
        },
        init: function(stop){
            dataStorage.data.panel.switchTab('stops');
            dataStorage.data.panel.drawStopDetail(stop.key, stop.ll, stop.data);
            dataStorage.data.panel.scrollTop();
        },
        add: function(name, ll, key, data){
            var recents = this.fetch();

            if ( ! Array.isArray(recents) ) {
                recents = [];
            } // end if

            for (var i = 0; i < recents.length; i++) {
                if ( recents[i].name == name ) {
                    recents.splice(i, 1);
                    break;
                } // end if
            } // end for

            recents.push({
                name: name,
                ll: ll,
                key: key,
                data: data,
            });

            localStorage.setItem('last-stops', JSON.stringify(recents));
            this.stops = this.loadStops();
        },
        fetch: function(){
            try {
                var recents = JSON.parse(localStorage.getItem('last-stops'));
            } catch (ex) {
                var recents = null;
            } // end try-catch
            return recents;
        },
        beautifyName: function(name){
            return name;
            // return name.replace('→', '<br />→ ');
        }
    }
});;

/* File:  last-searches.vue*/

Vue.component('last-searches', {
    template: `
    <div :class="{hidden: hidden}">
        <div id="last-searches" class="panel additional">
            <div v-if="searches.length" class="list">
                <p v-html="language['transport.recents']"></p>
                <ul class="recent-searches">
                    <li v-for="search in searches.slice(0, 3)">
                        <a v-on:click="init(search)" class="pointer" v-html="beautifyName(search.name)"></a>
                    </li>
                </ul>
            </div>
            <div v-else class="empty">
                <p class="lightgray" v-html="language['transport.empty']"></p>
            </div>
        </div>
    </div>
    `,
    mounted: function(){
        dataStorage.data.lastSearches = this;
    },
    data: function(){
        return {
            language: language,
            // key: 'last-searches',
            searches: this.loadSearches(),
            parameters: parameters,
            lang: parameters.lang,
            hidden: false,
        };
    },
    methods: {
        loadSearches: function(){
            var recents = this.fetch();
            return Array.isArray(recents) ? recents.reverse() : [];
        },
        init: function(search){
            // dataStorage.data.spinner.spin(1000);
            markers[0].setLatLng([search.origin.lat, search.origin.lng], true);
            markers[markers.length-1].setLatLng([search.destination.lat, search.destination.lng], true);
        },
        add: function(name, origin, destination){
            var recents = this.fetch();

            if ( ! Array.isArray(recents) ) {
                recents = [];
            } // end if

            for (var i = 0; i < recents.length; i++) {
                if ( recents[i].name == name ) {
                    recents.splice(i, 1);
                    break;
                } // end if
            } // end for

            recents.push({
                name: name,
                origin: origin,
                destination: destination,
            });

            localStorage.setItem('last-searches', JSON.stringify(recents));
            this.searches = this.loadSearches();
        },
        fetch: function(){
            try {
                var recents = JSON.parse(localStorage.getItem('last-searches'));
            } catch (ex) {
                var recents = null;
            } // end try-catch
            return recents;
        },
        beautifyName: function(name){
            return name;
            // return name.replace('→', '<br />→ ');
        }
    }
});;

/* File:  lang-feedback.vue*/

Vue.component('lang-feedback', {
    template: `
    <div class="lang-feedback">
        <div class="col-xs-6 text-center no-padding">
            <a class="pointer" v-on:click.stop="switchLang(lang)">
                <span v-if="'cs' == lang">{{ language['transport.en'] }}</span>
                <span v-else>{{ language['transport.cs'] }}</span>
            </a>
            
        </div>
        <div class="col-xs-6 text-center no-padding">
            <a class="pointer" v-on:click="showModal">{{ language['transport.feedback'] }}</a>
        </div>
    </div>
    `,
    mounted: function(){
        dataStorage.data.langFeedback = this;
    },
    data: function(){
        return {
            language: language,
            parameters: parameters,
            lang: parameters.lang,
        };
    },
    methods: {
        showModal: function(){
            dataStorage.data.modals.showFeedback();
        },
        switchLang: function(current){
            var to = 'en' == current ? 'cs' : 'en';
            var url = parameters.wwwroot + '/' + to + '/' + window.location.hash;
            window.location = url;
        }
    }
    
});;

/* File:  journey-type-switch.vue*/

Vue.component('journey-type-switch', {
    template: `
    <div :class="{hidden: hidden}" class="panel m-b-md type-switch component_journey-type-switch">
        <div class="row">
            <div class="col-sm-12 gray">
                <span class="tiny-descriptor">{{ language['planner.descriptors.route_type'] }}</span>
            </div>
            <div class="col-sm-12" style="height: 33px;">
                <div class="form-group">
                    <select class="form-control gray" v-on:change="changeType" ref="select">
                        <option value="direct">{{ language['planner.direct'] }}</option>
                        
                        <option value="poi">{{ language['planner.poi_s'] }}</option>
                    </select>
                </div>
            </div>
        </div>
    </div>
    `,
    mounted: function () {
        dataStorage.data.journeyTypeSwitch = this;
    },
    data: function () {
        return {
            language: language,
            hidden: ! window.parameters.components.routeType,
            getPlans: window.getPlans,
            dataStorage: window.dataStorage,
            mode: 'direct',
            win: window,
            pois: [
                
            ],
            markers: [],
        }
    },
    methods: {
        uniquePois: function() {
            const used = [];
            const filtered = [];
            for (let i = 0; i < this.pois.length; i++) {
                let poi = this.pois[i];
                if (!used.includes(poi.name)) {
                    used.push(poi.name);
                    filtered.push(poi);
                } // end if
            } // end for
            this.pois = filtered;
        },
        changeType: function () {
            this.mode = this.$refs.select.value;

            if ('direct' == this.mode) {
                document.body.classList.remove('only-origin');
                dataStorage.data.journeyTypeCircuit.length = 0;
            } else {
                dataStorage.data.journeyTypeCircuit.length = 20;
                document.body.classList.add('only-origin');
                // if (!dataStorage.data.publicSettingsBikeType.ownBike) {
                //     dataStorage.data.publicSettingsBikeType.toggle();
                // } // end if
                // this.poiModal();
            } // end if
            this.refreshMarkers();
            
            if (window.parameters.components.trips) {
                dataStorage.data.tripBtn.hidden = 'direct' == this.mode;    
            } // end if
        },
        refreshMarkers: function () {
            var that = this;
            this.markers.forEach(marker => {
                that.win.mapboxMap.removeLayer(marker);
            });

            if ('poi' == this.mode) {
                this.selectedPois().forEach(poi => {
                    let marker = L.marker(poi, {
                        icon: L.icon({
                            iconUrl: window.parameters.branding.images.markers.poi,
                            iconSize: [25, 32],
                            iconAnchor: [13, 32]
                        }),
                        draggable: false
                    });
                    // marker.setLatLng(poi);
                    marker.addTo(that.win.mapboxMap);
                    that.markers.push(marker);
                });
            } // end if  
        },
        selectedPois: function () {
            var pois = [];

            Array.from(document.querySelectorAll('[name^=pois\\[]')).forEach(el => {
                if (el.checked) {
                    let loc = el.value.split(',');
                    pois.push({ lat: loc[0], lon: loc[1] });
                } // end if
            });
            return pois;
        },
        poiModal: function() {
            dataStorage.data.poiModal.display = true;
        }
    }
});
;

/* File:  journey-type-pois.vue*/

Vue.component('journey-type-pois', {
    template: `
    <div :class="{hidden: hidden}" class="panel m-b-md">
        <div class="row pois">
            <div v-if="pois.length > 0">
                <div v-for="poi, i in pois" class="col-sm-12">
                    <div class="checkbox">
                        <label class="gray" v-on:change="refreshMarkers">
                            <input class="one-poi" type="checkbox" checked="checked" :name="'pois[]'" :value="poi.lat + ',' + poi.lon" >
                            {{ poi.name ? poi.name : poi.lat + ', ' + poi.lon }}
                        </label>
                    </div>
                </div>
            </div>
            <div class="text-center">
                <a v-on:click="poiModal" class="btn btn-link btn-sm btn-add-poi">{{ language['planner.add_poi'] }}</a>
            </div>
        </div>
    </div>
    `,
    mounted: function () {
        dataStorage.data.journeyTypePois = this;
    },
    data: function () {
        return {
            language: language,
            hidden: ! window.parameters.components.pois,
            getPlans: window.getPlans,
            dataStorage: window.dataStorage,
            win: window,
            pois: [
                
            ],
            markers: [],
        }
    },
    methods: {
        uniquePois: function() {
            const used = [];
            const filtered = [];
            for (let i = 0; i < this.pois.length; i++) {
                let poi = this.pois[i];
                if (!used.includes(poi.name)) {
                    used.push(poi.name);
                    filtered.push(poi);
                } // end if
            } // end for
            this.pois = filtered;
        },
        changeType: function () {
            this.mode = this.$refs.select.value;

            if ('direct' == this.mode) {
                document.body.classList.remove('only-origin');
            } else {
                document.body.classList.add('only-origin');
                if (!dataStorage.data.publicSettingsBikeType.ownBike) {
                    dataStorage.data.publicSettingsBikeType.toggle();
                } // end if
                this.poiModal();
            } // end if
            this.refreshMarkers();
        },
        refreshMarkers: function () {
            var that = this;
            this.markers.forEach(marker => {
                that.win.mapboxMap.removeLayer(marker);
            });

            if ('poi' == this.mode) {
                this.selectedPois().forEach(poi => {
                    let marker = L.marker(poi, {
                        icon: L.icon({
                            iconUrl: '/v2.5/img/resources/marker_poi.svg',
                            iconSize: [25, 32],
                            iconAnchor: [13, 32]
                        }),
                        draggable: false
                    });
                    // marker.setLatLng(poi);
                    marker.addTo(that.win.mapboxMap);
                    that.markers.push(marker);
                });
            } // end if  
        },
        selectedPois: function () {
            var pois = [];

            Array.from(document.querySelectorAll('[name^=pois\\[]')).forEach(el => {
                if (el.checked) {
                    let loc = el.value.split(',');
                    pois.push({ lat: loc[0], lon: loc[1] });
                } // end if
            });
            return pois;
        },
        poiModal: function() {
            dataStorage.data.poiModal.display = true;
        }
    }
});
;

/* File:  journey-type-circuit.vue*/

Vue.component('journey-type-circuit', {
    template: `
    <div :class="{hidden: hidden}" class="panel m-b-md type-switch component_journey-type-circuit">
        <div class="row">
            <div class="col-sm-12 gray">
                <span class="tiny-descriptor">{{ language['planner.descriptors.circuit_length'] }} <b class="pull-right">{{ length > 0 ? length + ' km' : language['planner.slider.zero'] }}</b></span>
            </div>
            <div class="col-sm-12 kms-wrapper">
                <vue-slider ref="slider" v-model="length" v-bind="options" />
            </div>
        </div>
    </div>
    `,
    components: {
        'vueSlider': window[ 'vue-slider-component' ],
    },
    mounted: function () {
        dataStorage.data.journeyTypeCircuit = this;
    },
    data: function () {
        return {
            language: language,
            hidden: ! window.parameters.components.desiredLength,
            length: 0,
            options: {
                dotSize: 14,
                width: 'auto',
                height: 4,
                contained: false,
                direction: 'ltr',
                  data: null,
                min: 0,
                max: 100,
                interval: 1,
                disabled: false,
                clickable: true,
                duration: 0.5,
                adsorb: false,
                lazy: false,
                tooltip: 'active',
                tooltipPlacement: 'top',
                tooltipFormatter: void 0,
                useKeyboard: false,
                keydownHook: null,
                dragOnClick: false,
                enableCross: true,
                fixed: false,
                minRange: void 0,
                maxRange: void 0,
                order: true,
                marks: false,
                dotOptions: void 0,
                process: true,
                dotStyle: void 0,
                railStyle: void 0,
                processStyle: void 0,
                tooltipStyle: void 0,
                stepStyle: void 0,
                stepActiveStyle: void 0,
                labelStyle: void 0,
                labelActiveStyle: void 0,
            }
        }
    },
    methods: {
        
    },
});
;

/* File:  journey-traveler.vue*/

Vue.component('journey-traveler', {
    template: `
    <div v-if="parameters.components.preferences.travelMode" :class="{hidden: hidden}" class="panel m-b-md type-switch no-border lil-panel component_journey-traveler">
        <div class="row">
            <div class="col-sm-12 gray">
                <span class="tiny-descriptor">{{ language['planner.traveler.title'] }}</span>
            </div>

            <div class="col-sm-12" style="height: 33px;">
                <div class="form-group">
                    <select class="form-control gray" v-on:change="onChange" ref="mode">
                        <option value="ALONE">{{ language['planner.traveler.alone'] }}</option>
                        <option value="IN_GROUP">{{ language['planner.traveler.in_group'] }}</option>
                        <option value="WITH_CHILDREN">{{ language['planner.traveler.with_children'] }}</option>
                    </select>
                </div>
            </div>
        </div>
    </div>
    `,
    mounted: function () {
        dataStorage.data.journeyTraveler = this;
    },
    data: function () {
        return {
            language: language,
            hidden: false,
            getPlans: window.getPlans,
            dataStorage: window.dataStorage,
            mode: 'direct',
            win: window,
            parameters: window.parameters
        }
    },
    methods: {
        onChange: function() {
            if ('WITH_CHILDREN' == this.$refs.mode.value) {
                dataStorage.data.publicSettingsCarfree.lvl = 3;
            } // end if
        }
    }
});
;

/* File:  journey-bike-type.vue*/

Vue.component('journey-bike-type', {
    template: `
    <div :class="{hidden: hidden}" class="panel m-b-md type-switch no-border lil-panel component_journey-bike-type">
        <div class="row">
            <div class="col-sm-12 gray">
                <span class="tiny-descriptor">{{ language['planner.biketype'] }}</span>
            </div>
            <p class="text-center">
                <a class="btn btn-link btn-biketype">{{ language['planner.bikes.city_bike'] }}</a>
            </p>
        </div>
    </div>
    `,
    mounted: function () {
        dataStorage.data.journeyBikeType = this;
    },
    data: function () {
        return {
            language: language,
            hidden: false,
            getPlans: window.getPlans,
            dataStorage: window.dataStorage,
            mode: 'direct',
            win: window,
            
        }
    },
    methods: {
        updateSurface: function() {
            switch (this.$refs.type.value) {
                case 'MOUNTAIN_BIKE':
                    dataStorage.data.publicSettingsSmooth.lvl = 2;
                    break;
                case 'CITY_BIKE': case 'ROAD_BIKE':
                    dataStorage.data.publicSettingsSmooth.lvl = 4;
                    break;
            } // end switch
        }, // end func
    }
});
;

/* File:  isochrones.vue*/

Vue.component('isochrones', {
    template: `
    <div v-if="false" id="isochrones" class="isochrones" />
    `,
    mounted: function(){
        dataStorage.data.isochrones = this;
    },
    data: function () {
        return {
            parameters: parameters,
            language: language,
            win: window,
            map: null,
            isochrones: {
                url: window.parameters.api.isochrones,
                params: {
                    client: 'WEB',
                    key: window.parameters.api.key,
                    lat: '',
                    lon: '',
                    rangesInMinutes: 10,
                    climbs: '',
                    traffic: '',
                    contourSimplification: '',
                    stairs: '',
                    oneways: '',
                    pavements: '',
                    surface: '',
                },
                layers: [],
                colors: [
                    // { color: '#A62CC4', fillColor: '#A62CC4', fillOpacity: .25 },
                    // { color: '#7934C5', fillColor: '#7934C5', fillOpacity: .25 },
                    // { color: '#6342D7', fillColor: '#6342D7', fillOpacity: .25 },
                    // { color: '#4D4BDA', fillColor: '#4D4BDA', fillOpacity: .25 },
                    // { color: '#2B65C2', fillColor: '#2B65C2', fillOpacity: .25 },
                    { color: '#3A84C3', fillColor: '#3A84C3', fillOpacity: .25 },
                    { color: '#4CA6B4', fillColor: '#4CA6B4', fillOpacity: .25 },
                    { color: '#4EAC89', fillColor: '#4EAC89', fillOpacity: .25 },
                    { color: '#55B96A', fillColor: '#55B96A', fillOpacity: .25 },
                    
                ]
            },
            apiLimit: 0, // seconds
            lastCallTimestamp: window.localStorage.getItem('isochronesLastCallTimestamp')
        }
    },
    watch: {
        lastCallTimestamp(newTs, oldTs) {
            this.win.localStorage.setItem('isochronesLastCallTimestamp', newTs);
        }
    },
    methods: {
        setMap(map) {
            this.map = map;
        },
        init() {
            const that = this;
            this.map.on('moveend', () => {
                if ( ! that.win.plansStorage.length) {
                    this.getIsochrones();
                } // end if
            });
        },
        buildIsochronesRequest(coordinates = null) {
            let url = '';
            var params = {};

            var center = null;
            if (coordinates) {
                center = coordinates;
            } else {
                center = this.win.mapboxMap.getCenter();
                if (this.win.markers.length) {
                    const markerA = this.win.markers[0].getLatLng();
                    if (null !== markerA) {
                        center = markerA;
                    } // end if
                } // end if   
            } // end if-else

            params = this.isochrones.params;
            params.key = this.parameters.api.key;
            params.lat = center.lat;
            params.lon = center.lon ? center.lon : center.lng;

            if (dataStorage.data.modeSelectorModal && dataStorage.data.modeSelectorModal.vehicle) {
                if (['WALK', 'RUN'].indexOf(dataStorage.data.modeSelectorModal.vehicle) !== -1) {
                    // WALK izochrona neni implementovana (18.10.2021)
                    params.walkType = dataStorage.data.modeSelectorModal.vehicle;
                    delete params.bikeType;
                } else {
                    params.bikeType = dataStorage.data.modeSelectorModal.vehicle;    
                } // end if-else
                
            } // end if

            // Auto-injected by Axios
            // delete params.key;

            let n = 0;
            for (key in params) {
                if (params[key].length !== 0) {
                    let glue = (0 === n ? '?' : '&');
                    
                    if ('object' == typeof params[key]) {
                        params[key].forEach(val => {
                            url += `${glue}${key}=${val}`;    
                            ++n;
                        });
                    } else {
                        url += `${glue}${key}=${params[key]}`;    
                    } // end if-else
                    
                    ++n;
                } // end if
            } // end for

            return url;
        },
        getIsochrones(coordinates = null, onFinish = null) {
            const that = this;

            if ( ! parameters.components.isochrones || this.win._isEdit) {
                if (onFinish) onFinish();
                return;
            } // end if
            
            if ( ! dataStorage.data.isochronesToggle.active) {
                if (onFinish) onFinish();
                return;
            } // end if

            const timestamp = (new Date).getTime()/1000;
            console.log(`Last Isochrones API call was ${this.lastCallTimestamp ? Math.round(timestamp - this.lastCallTimestamp, 2) : '∞'}s ago`);
            if (this.lastCallTimestamp !== null && (timestamp - this.lastCallTimestamp) < this.apiLimit) {
                console.log('Skipped the Isochrones API call');
                if (onFinish) onFinish();
                return;
            } // end if
            this.lastCallTimestamp = timestamp;

            const endpoint = this.isochrones.url;

            const query = this.buildIsochronesRequest(coordinates);

            const url = endpoint + query;

            axios.get(url).then(res => {
                that.paintIsochrones(res.data, onFinish);
            }).catch(ex => {
                console.log('Could not load Isochrones');
                that.paintIsochrones({}, onFinish);
            });
        },
        paintIsochrones(data = null, onFinish) {
            const that = this;

            for (key in this.isochrones.layers) {
                that.win.mapboxMap.removeLayer(this.isochrones.layers[key]);
            } // end for

            if (data && undefined !== data.features && data.features.length) {
                var i = 0;
                data.features.forEach(feature => {
                    
                    // Rotate colors
                    if ('undefined' == typeof this.isochrones.colors[i]) {
                        i = 0;
                    } // end if
                    
                    const opts = this.isochrones.colors[i];

                    let coordinates = [];
                    feature.geometry.coordinates[0].forEach(coords => {
                        coordinates.push(L.latLng(coords[1], coords[0]));
                    });

                    const polygon = L.polygon(coordinates, opts);
                    // polygon._isochrone_id = `isochrone__${get_random_string()}`;
                    that.isochrones.layers.push(polygon);
                    that.win.mapboxMap.addLayer(polygon);

                    polygon.bindTooltip(that.language['planner.isochrones.tooltip']);
                    
                    ++i;
                });
            } // end if

            if (onFinish) onFinish();
        },
    }
});;

/* File:  inspector.vue*/

Vue.component('inspector', {
    template: `
    <div :class="{loading: loading}" v-if="win.parameters.components.inspector && show" id="inspector" class="panel inspector">
        <a v-on:click="close()" class="close" href="#"><i class="fa fa-times" aria-hidden="true"></i></a>
        
        <div class="input-group">
            <span class="input-group-addon">Plan ID</span>    
            <input v-on:keyup.enter="inspect(null, true);" :value="ids.plan ? ids.plan.replace('-', '/') : ''" placeholder="responseId/planId" type="text" ref="planId" id="plan-id" class="form-control" />
        </div>

        <template v-if="layers.plan !== null">
            <div class="input-group">
                <span class="input-group-addon">Ride ID</span>    
                <input readonly :value="ids.ride" placeholder="6238bebf017e470001d8c35b" type="text" ref="rideId" id="ride-id" class="form-control" />
            </div>
            <div class="input-group" style="padding: 0 0 0 10px; margin-right: 0; width: 100%;">
                <label>Replannings <span style="opacity: .75;"></span></label>
                <textarea readonly rows="4" class="form-control" :value="ids.replannings.join('\\n')" ref="replannings" placeholder=""></textarea>
            </div>
        </template>

        <div class="text-center" style="margin-left: 10px;">
            <button v-on:click="inspect(null, true)" class="btn btn-success">
                Paint 🎨
            </button>
        </div>
        
        <template v-if="layers.plan !== null">
        
        <hr />
        <div class="carousel text-center">
            <button v-on:click="prevReplanning();" class="btn btn-link btn-sm">Prev replanning</button>
            <div class="num">
                <input v-on:keyup.enter="setReplanningIndex();" ref="replanningIndex" :value="ids.replannings.length ? selectedReplanning+1 : 0" type="number" min="1" :max="ids.replannings.length" class="editable-replanning" />
                <span class="n-outof-n"><span style="color: transparent;">XX</span> / {{ ids.replannings.length }}</span>
            </div>
            <button v-on:click="nextReplanning();" class="btn btn-link btn-sm">Next replanning</button>
        </div>
        <div class="transparency">
            <button v-on:click="toggleTransparency('plan')" class="btn btn-sm" :class="{'btn-info': transparency.plan, 'btn-secondary': ! transparency.plan}"><i class="fa fa-check"></i> Plan</button>
            <button v-on:click="toggleTransparency('ride')" class="btn btn-sm" :class="{'btn-info': transparency.ride, 'btn-secondary': ! transparency.ride}"><i class="fa fa-check"></i> Trajectory</button>
            <button v-on:click="toggleTransparency('replanning')" class="btn btn-sm" :class="{'btn-info': transparency.replanning, 'btn-secondary': ! transparency.replanning}"><i class="fa fa-check"></i> Replanning</button>
        </div>
        <hr />
        <div>
            <ul class="help">
                <li><span style="background-color: #74c476; width: 130px;">Original plan</span></li>
                <li><span style="background-color: #FF3333; color: white; width: 160px;">User trajectory</span></li>
                <li><span style="background-color: rgb(241,210,71); width: 110px;">Active replanning</span></li>
            </ul>
        </div>

        </template>
    </div>
    `,
    mounted: function () {
        dataStorage.data.inspector = this;
    },
    data: function () {
        return {
            show: false,
            initialized: false,
            ids: {
                plan: null,
                ride: null,
                replannings: []
            },
            win: window,
            params: window.parameters,
            layers: {
                planBg: null,
                plan: null,
                planDecorator: null,
                rideBg: null,
                ride: null,
                rideDecorator: null,
                replanningBg: null,
                replanning: null,
                replanningDecorator: null,
            },
            loading: false,
            selectedReplanning: 0,
            data: {
                plan: null,
                ride: null,
                replannings: []
            },
            transparency: {
                plan: true,
                ride: true,
                replanning: true
            },
            fetchMode: "main",
            nextPrevTimeout: null,
        }
    },
    watch: {
        loading(isLoading) {
            if (isLoading) {
                dataStorage.data.spinner.show();
            } else {
                dataStorage.data.spinner.hide();
            }
        }
    },
    methods: {
        isActive() {
            return this.show;
        },
        inspect(hash = null, mainBtn = false) {

            if (!is_logged_in()) {
                alert("Please log in first.");
                return;
            } // end if

            const params = {
                plan: null,
                ride: null,
                replanning: [],
            };

            if (hash) {
                hash = hash.replace('#inspect=', '');
                const items = hash.split(';');
                items.forEach(item => {
                    const parts = item.split(":");
                    if ("replanning" == parts[0]) {
                        params.replanning = parts[1].split(',');
                    } else {
                        params[parts[0]] = parts[1];
                    } // end if-else
                });
                
                mainBtn = true;

            } else {
                if (this.$refs.planId.value.length) {
                    params.plan = this.$refs.planId.value.replace('/', '-');
                } else {
                    alert("No can do bro.");
                    return;
                } // end if-else
            } // end if-else

            if (mainBtn) {
                this.selectedReplanning = 0;
            } // end if

            this.fetchMode = mainBtn ? 'main' : 'prevnext';

            this.fetch(params);

        },
        fetch(params) {
            const self = this;

            this.loading = true;

            const plan = params.plan.split('-');
            firebase.auth().currentUser.getIdToken().then(token => {
                axios.all([
                    axios.get(this.params.api.inspector.history
                        .replace('{originalResponseId}', plan[0])
                        .replace('{planId}', plan[1]), {timeout: 120000}),

                    axios.get(this.params.api.inspector.trajectory
                        .replace('{responseId}', plan[0])
                        .replace('{planId}', plan[1]), {
                        headers: {
                            "Authorization": token
                        },
                        timeout: 120000
                    }),

                    axios.get(this.params.api.inspector.plan
                        .replace('{responseId}', plan[0])
                        .replace('{planId}', plan[1]), {timeout: 120000})
                ])
                    .then(axios.spread((replanningData, rideData, planData) => {

                        const onComplete = (replanningRes) => {
                            params.replanning = replanningRes;

                            self.ids.plan = null;
                            self.ids.ride = null;
                            self.ids.replannings = [];

                            this.ids.plan = `${plan[0]}/${plan[1]}`;
                            this.ids.ride = rideData.data.trackId;
                            replanningData.data.replannings.forEach(replan => {
                                self.ids.replannings.push(replan.responseId);
                            });

                            self.open();
                            self.paint(
                                rideData.data,
                                planData.data,
                                replanningRes.data,
                                params
                            );
                        };

                        if (replanningData.data.replannings.length) {
                            axios.get(this.params.api.inspector.replan
                                .replace('{replanningId}', replanningData.data.replannings[self.selectedReplanning].responseId)).then(replanningRes => {
                                    
    
                                    onComplete(replanningRes);
                                });    
                        } else {
                            const replanningRes = {
                                data: {
                                    plans: [{
                                        stats: {
                                            // durationSeconds: 0,
                                            // distanceMeters: 0
                                        },
                                        labels: [],
                                        type: null,
                                        legs: []
                                    }]
                                }
                            };
                            onComplete(replanningRes);
                        }

                        

                    })).finally(() => {
                        self.loading = false;
                    }).catch(err => {
                        if (window.parameters.debug) {
                            throw err;
                        } else {
                            alert("Request failed.");
                        } // end if-else
                    });
            });


        },
        paint(rideData, planData, replanningData, params) {
            const that = this;

            this.clear();
            const arrowColor = "rgba(0,0,0, 0.33)";

            // console.log(rideData, planData, replanningData);

            const plans = {
                // plan: new Plan((new TransportResponse(planData)).plans[params.plan.split('-')[1]]),
                plan: new Plan((new TransportResponse(planData)).plans[0]),
                trajectory: this.parseTrajectory(rideData),
                replanning: new Plan((new TransportResponse(replanningData)).plans[0])
            };

            const originalPlanStyle = Object.assign({}, BFRIENDLY_OPTIONS);
            this.layers.planBg = L.polyline(plans.plan.allLatLongs, HIGHLIGHT_OPTIONS);
            this.layers.plan = L.polyline(plans.plan.allLatLongs, originalPlanStyle);
            this.layers.planDecorator = L.polylineDecorator(plans.plan.allLatLongs, {
                patterns: [
                    {
                        offset: 0,
                        repeat: 20,
                        symbol: L.Symbol.arrowHead({
                            pixelSize: 4,
                            polygon: false,
                            pathOptions: {
                                stroke: true,
                                weight: 2,
                                color: arrowColor
                            }
                        })
                    }
                ]
            });

            const rideStyle = Object.assign({}, FAST_OPTIONS);
            this.layers.rideBg = L.polyline(plans.trajectory.allLatLongs, HIGHLIGHT_OPTIONS);
            this.layers.ride = L.polyline(plans.trajectory.allLatLongs, rideStyle);
            this.layers.rideDecorator = L.polylineDecorator(plans.trajectory.allLatLongs, {
                patterns: [
                    {
                        offset: 0,
                        repeat: 20,
                        symbol: L.Symbol.arrowHead({
                            pixelSize: 4,
                            polygon: false,
                            pathOptions: {
                                stroke: true,
                                weight: 2,
                                color: arrowColor
                            }
                        })
                    }
                ]
            });

            const replanningStyle = Object.assign({}, BS_BIKE_OPTIONS);
            replanningStyle.color = 'rgb(241,210,71)';
            this.layers.replanningBg = L.polyline(plans.replanning.allLatLongs, HIGHLIGHT_OPTIONS);
            this.layers.replanning = L.polyline(plans.replanning.allLatLongs, replanningStyle);
            this.layers.replanningDecorator = L.polylineDecorator(plans.replanning.allLatLongs, {
                patterns: [
                    {
                        offset: 0,
                        repeat: 20,
                        symbol: L.Symbol.arrowHead({
                            pixelSize: 4,
                            polygon: false,
                            pathOptions: {
                                stroke: true,
                                weight: 2,
                                color: arrowColor
                            }
                        })
                    }
                ]
            });

            for (key in this.layers) {
                if (null !== this.layers[key]) {
                    that.win.mapboxMap.addLayer(this.layers[key]);
                } // end if
            } // end for

            if ("main" == that.fetchMode) {
                that.win.mapboxMap.fitBounds(this.layers.plan.getBounds(), { paddingTopLeft: [350, 0] });
            } // end if

            this.applyOpacities();
        },
        parseTrajectory(trajectory) {
            trajectory.allLatLongs = [];
            trajectory.trajectory.features.forEach(feature => {
                feature.geometry.coordinates.forEach(coords => {
                    coords.forEach(ll => {
                        trajectory.allLatLongs.push(new L.latLng(ll[1], ll[0]));
                    });
                });
            });
            return trajectory;
        },
        clear() {
            const that = this;

            for (key in this.layers) {
                if (null !== this.layers[key]) {
                    that.win.mapboxMap.removeLayer(this.layers[key]);
                } // end if

                this.layers[key] = null;
            } // end for

            // this.transparency.plan = this.transparency.ride = this.transparency.replanning = true;
        },
        open() {
            const self = this;
            self.show = true;
            router.semaphore = "RED";

            while (markers.length > 2) {
                markers[0].remove();
            } // end while
            // FIXME: lil hack
            setTimeout(() => {
                markers[0].remove();
                markers[1].remove();
                router.semaphore = "GREEN";
            }, 100);

            if (!dataStorage.data.panel.compact) {
                dataStorage.data.panel.toggleCompact();
            } // end if

            if (!dataStorage.data.results.compact) {
                dataStorage.data.results.toggleCompact();
            } // end if

            if (window.plansStorage.length) {
                window.painter.dehighlightPlan(window.plansStorage[get_active_plan_id()]);
                dataStorage.data.routeOpts.routeOptsHidden = true;
            } // end if

            if (window.draggable) {
                window.draggable.disable();
            } // end if

            if (dataStorage.data.isochrones) {
                parameters.components.isochrones = false;
                dataStorage.data.isochrones.paintIsochrones(null);
            } // end if

            if (dataStorage.data.pois && this.params.components.pois) {
                dataStorage.data.pois.clearMarkers();
                dataStorage.data.pois.frozen = true;
            } // end if

            if ("object" == typeof self.win.segmentsPainter) {
                self.win.segmentsPainter.clean();
                self.win.segmentsPainter.frozen = true;
            } // end if

            this.initialized = true;
            dataStorage.data.inspectorBtn.active = true;
        },
        close() {
            const self = this;

            this.clear();

            this.show = false;

            if (dataStorage.data.panel.compact) {
                dataStorage.data.panel.toggleCompact();
            } // end if

            if (dataStorage.data.results.compact) {
                dataStorage.data.results.toggleCompact();
            } // end if

            if (window.draggable) {
                window.draggable.enable();
            } // end if

            if (dataStorage.data.pois && this.params.components.pois) {
                dataStorage.data.pois.frozen = false;
            } // end if

            if ("object" == typeof self.win.segmentsPainter) {
                self.win.segmentsPainter.frozen = false;
            } // end if

            this.win.painter.lastClickedPlan = null;

            dataStorage.data.inspectorBtn.active = false;
        },
        toggleTransparency(what) {
            this.transparency[what] = !this.transparency[what];
            this.applyOpacities();
        },
        applyOpacities() {
            for (key in this.transparency) {
                this.layers[key].setStyle({ opacity: (this.transparency[key] ? 1.00 : .1) });
                this.layers[`${key}Bg`].setStyle({ opacity: (this.transparency[key] ? 1.00 : 0.00) });
                this.layers[`${key}Decorator`].setStyle({ opacity: (this.transparency[key] ? 1.00 : 0.00) });
            } // end for
        },
        clearTimeout() {
            if (this.nextPrevTimeout) {
                clearTimeout(this.nextPrevTimeout);
            } // end if
        },
        nextReplanning() {
            this.clearTimeout();

            if ((this.selectedReplanning + 2) > this.ids.replannings.length) {
                this.selectedReplanning = 0;
            } else {
                this.selectedReplanning++;
            } // end if-else

            this.nextPrevTimeout = setTimeout(() => {
                this.inspect();
            }, 300);
        },
        prevReplanning() {
            this.clearTimeout();

            if ((this.selectedReplanning - 1) < 0) {
                this.selectedReplanning = this.ids.replannings.length - 1;
            } else {
                this.selectedReplanning--;
            } // end if-else

            this.nextPrevTimeout = setTimeout(() => {
                this.inspect();
            }, 300);
        },
        setReplanningIndex() {
            let newValue = this.$refs.replanningIndex.value;
            this.selectedReplanning = newValue - 1;
            this.inspect();
        }
    }
});

;

/* File:  info-modal.vue*/

Vue.component('info-modal', {
    template: `
    <div id="info-modal" v-if="parameters.components.welcomeMessage">
        <modal v-if="display" v-on:close="display = false" class="info-modal">
            <div slot="header">
                <b>{{ language['welcome.title'] }}</b>
            </div>
            <div slot="body" v-html="language['welcome.body']">
               
            </div>
            <span slot="button">
                {{ language['welcome.continue'] }}
            </span>
        </modal>
    </div>
    `,
    mounted: function(){
        dataStorage.data.infoModal = this;

        let now = parseInt(((new Date).getTime()/1000).toFixed(0));
        let shown = localStorage.getItem(this.key);
        
        if ( ! shown || (shown && (now - parseInt(shown)) > 86400 ) ) {
            localStorage.setItem(this.key, now);
            if (this.win.innerWidth >= 1000) {
                this.display = true;    
            } // end if
        } // end if
    },
    data: function () {
        return {
            language: language,
            display: false,
            key: 'info-modal',
            win: window,
            parameters: window.parameters
        }
    },
    methods: {
        
    }
});;

/* File:  graph-detail-panel.vue*/

Vue.component('graph-detail-panel', {
    template: `
    <div class="left-block graph-detail-panel" v-if="show && feature">
        <div class="heading bold">
            <span v-if="feature">Edge {{ feature.properties.from }}/{{ feature.properties.to }}</span>
            <span v-else>Graph editor</span>
        </div>
        <button v-if="editing === null" class="btn btn-link cancel" v-on:click="close()">
            <i class="fa fa-times"></i>
        </button>
        <template v-if="feature !== null && editing === null">
        
        <div class="first-feature" style="margin-top: -10px; margin-bottom: 50px; padding-bottom: 0px;">
            <div>
                <p class="text-center">
                    ({{ feature.properties.length }} meters)
                </p>
            </div>
        </div>

        <div class="one-feature">
            <h5 class="h5">Is blocked</h5>
            <div class="middle">
                <p>
                    {{ values.blocker[ feature.properties.blocker ? 'yes' : 'no' ].text }}
                </p>
                <img :src="values.blocker[ feature.properties.blocker ? 'yes' : 'no' ].img" alt="Blocked" />
            </div>
            <div class="cleaner"></div>
            <button class="btn btn-success btn-sm" v-on:click="editing = 'blocker'">Edit</button>
        </div>
        <div class="one-feature">
            <h5 class="h5">Traffic</h5>
            <div class="middle">
                <p>
                    {{ values.stress[ feature.properties.stress ].text }}
                </p>
                <img :src="values.stress[ feature.properties.stress ].img" alt="Stress" />
            </div>
            <div class="cleaner"></div>
            <button class="btn btn-success btn-sm" v-on:click="editing = 'stress'">Edit</button>
        </div>
        <div class="one-feature">
            <h5 class="h5">Surface</h5>
            <div class="middle">
                <p>
                    {{ values.surface[ feature.properties.surface ].text }}
                </p>
                <img :src="values.surface[ feature.properties.surface ].img" alt="Surface" />
            </div>
            <div class="cleaner"></div>
            <button class="btn btn-success btn-sm" v-on:click="editing = 'surface'">Edit</button>
        </div>
        <div class="one-feature" v-if="feature.properties.slopeEnum">
            <h5 class="h5">Slope</h5>
            <div class="middle">
                <p>
                    {{ values.slope[ feature.properties.slopeEnum ].text }}
                </p>
                <img :src="values.slope[ feature.properties.slopeEnum ].img" alt="Slope" />
            </div>
            <div class="cleaner"></div>
            <button class="btn btn-success btn-sm" v-on:click="editing = 'slopeEnum'">Edit</button>
        </div>

        </template>

        <edge-edit-form v-if="editing !== null" :feature="feature" :editing="editing" />
    </div>
    `,
    mounted: function(){
        dataStorage.data.graphDetailPanel = this;
    },
    data: function () {
        const data = {
            show: false,
            language: language,
            win: window,
            params: window.parameters,
            activeLayer: "default",
            feature: null,
            editing: null,
            expand: false,
            values: {
                blocker: {
                    yes: { text: "[yes] Cras fermentum suscipit lectus, eu aliquam mauris vulputate in.", img: "https://picsum.photos/200?v=20" },
                    no: { text: "[no] Mauris suscipit, velit non elementum egestas.", img: "https://picsum.photos/200?v=21" },
                },
                stress: {
                    1: { text: "[1] Cras fermentum suscipit lectus, eu aliquam mauris vulputate in.", img: "https://picsum.photos/200?v=10" },
                    2: { text: "[2] In est tortor, ornare in leo sit amet, congue pulvinar metus. Sed faucibus dapibus malesuada.", img: "https://picsum.photos/200?v=11" },
                    3: { text: "[3] Mauris suscipit, velit non elementum egestas, est odio fermentum metus, eu faucibus lectus ligula sed neque.", img: "https://picsum.photos/200?v=12" },
                    4: { text: "[4] Donec nec nibh at erat malesuada accumsan. Maecenas quis libero eget purus pretium commodo.", img: "https://picsum.photos/200?v=13" },
                    5: { text: "[5] Sed sit amet tellus commodo, vestibulum mauris id, maximus nibh. Nulla mollis nibh elit, sed aliquet tellus auctor tempus.", img: "https://picsum.photos/200?v=14" },
                },
                surface: {
                    EXCELLENT: { text: "[EXCELLENT] Lorem ipsum dolor sit amet, consectetur adipiscing elit.", img: "https://picsum.photos/200?v=1" },
                    GOOD: { text: "[GOOD] Aenean convallis ipsum nec nunc malesuada, a vestibulum ipsum facilisis.", img: "https://picsum.photos/200?v=2" },
                    INTERMEDIATE: { text: "[INTERMEDIATE] Vestibulum porta vitae dui quis feugiat. Ut vel vehicula metus.", img: "https://picsum.photos/200?v=3" },
                    BAD: { text: "[BAD] Etiam commodo ligula nec tincidunt imperdiet. Curabitur tempor lacus sed risus volutpat", img: "https://picsum.photos/200?v=4" },
                    HORRIBLE: { text: "[HORRIBLE] Praesent molestie porta pharetra. Vestibulum auctor feugiat quam eget tempus.", img: "https://picsum.photos/200?v=5" },
                    IMPASSABLE: { text: "[IMPASSABLE] Aliquam pharetra odio nibh, at tincidunt ex aliquam ac.", img: "https://picsum.photos/200?v=6" },
                    UNKNOWN: { text: "[UNKNOWN] Etiam molestie, dui at fermentum vestibulum, velit justo tincidunt eli.", img: "https://picsum.photos/200?v=8" },
                },
                slope: {
                    lvl1: { interval: [-Infinity,4], text: "[0-3] Lorem ipsum dolor sit amet, consectetur adipiscing elit.", img: "https://picsum.photos/200?v=lvl1" },
                    lvl2: { interval: [4,6], text: "[3-5] Vestibulum porta vitae dui quis feugiat. Ut vel vehicula metus.", img: "https://picsum.photos/200?v=lvl2" },
                    lvl3: { interval: [6,9], text: "[6-8] Etiam commodo ligula nec tincidunt imperdiet. Curabitur tempor lacus sed risus volutpat.", img: "https://picsum.photos/200?v=lvl3" },
                    lvl4: { interval: [9,16], text: "[9-15] Praesent molestie porta pharetra. Vestibulum auctor feugiat quam eget tempus.", img: "https://picsum.photos/200?v=lvl4" },
                    lvl5: { interval: [16,30], text: "[16-29] Aliquam pharetra odio nibh, at tincidunt ex aliquam ac.", img: "https://picsum.photos/200?v=lvl5" },
                    lvl6: { interval: [30,Infinity], text: "[30+] Etiam molestie, dui at fermentum vestibulum, velit justo tincidunt eli.", img: "https://picsum.photos/200?v=lvl6" },
                },
            }
        }
        data.values.slopeEnum = data.values.slope;
        return data;
    },
    watch: {
        show(newVal) {
            dataStorage.data.graphDetailPanelControls.show = newVal;
        },
        activeLayer(newVal, oldVal) {
            this.win.graphEditor.toggleType(this.activeLayer);
        },
        feature(newFeature) {
            this.expand = false;
            if (newFeature !== null) {
                
                this.editing = null;

                for (const [lvl, data] of Object.entries(this.values.slope)) {
                    if (this.feature.properties.slope >= data.interval[0] && this.feature.properties.slope < data.interval[1]) {
                        this.feature.properties.slopeEnum = lvl;
                    } // end if
                } // end for    
            } // end if
            
        }
    },
    methods: {
        isOpen() {
            return null !== this.feature;
        },
        enable() {
            this.show = true;
            
            if (16 === this.win.graphEditor.map.getZoom()) {
                this.win.graphEditor.fetch(this.activeLayer);
                    dataStorage.data.mapEditBtn.active = true;
            } else {
                this.win.graphEditor.map.once('zoomend', () => {
                    this.win.graphEditor.fetch(this.activeLayer);
                    dataStorage.data.mapEditBtn.active = true;
                })
                this.win.graphEditor.map.setZoom(16);
            } // end if-else
            
        },
        close() {
            this.win.graphEditor.activeLayer.setStyle({weight: 3});
            this.feature = null;
        },
        disable() {
            this.show = false;

            if (dataStorage.data.panel.compact) {
                dataStorage.data.panel.toggleCompact();
            } // end if
    
            if (dataStorage.data.results.compact) {
                dataStorage.data.results.toggleCompact();
            } // end if

            if (window.draggable) {
                window.draggable.enable();
            } // end if

            this.win.painter.lastClickedPlan = null;

            this.win.mapboxMap.removeLayer(window.graphEditor.bwLayer);
            window.mapStyleLayer.addTo(this.win.mapboxMap);

            this.win.mapboxMap.removeLayer(window.graphEditor.lines);

            dataStorage.data.mapEditBtn.active = false;

            this.feature = null;

        },
        isAdmin() {
            return dataStorage.data.userProfile.isAdmin();
        },
    }
});;

/* File:  graph-detail-panel-controls.vue*/

Vue.component('graph-detail-panel-controls', {
    template: `
    <div class="route-opts panel graph-detail-panel-controls" v-if="show">
        <a v-on:click="pick('default');" data-option="default" ref="default" class="route-option pointer" :class="{active: opts.default}">
            <img src="/v2.5/img/map--gray.svg" alt="Option icon" class="gray" />
            <img :src="params.branding.images.views.map" alt="Option icon" class="green" />
            <span class="opt-desc">{{ language['planner.planpanels.default'] }}</span>
        </a>
        
        <a v-if="isAdmin()" v-on:click="pick('stress');" data-option="stress" ref="stress" class="route-option pointer" :class="{active: opts.stress}">
            <img src="/v2.5/img/traffic--gray.svg" alt="Option icon" class="gray" />
            <img :src="params.branding.images.views.traffic" alt="Option icon" class="green" />    
            <span class="opt-desc">{{ language['planner.planpanels.stress'] }}</span>
        </a>
        
        <a v-on:click="pick('surfaceSmoothness');" data-option="surfaceSmoothness" ref="surfaceSmoothness" class="route-option pointer" :class="{active: opts.surfaceSmoothness}">
            <img src="/v2.5/img/road--gray.svg" alt="Option icon" class="gray" />
            <img :src="params.branding.images.views.surface" alt="Option icon" class="green" />
            <span class="opt-desc">{{ language['planner.planpanels.surface'] }}</span>
        </a>
        
        <a v-if="isAdmin()" v-on:click="pick('slope');" data-option="slope" ref="slope" class="route-option pointer" :class="{active: opts.slope}">
            <img src="/v2.5/img/mountain--gray.svg" alt="Option icon" class="gray" />
            <img :src="params.branding.images.views.steepness" alt="Option icon" class="green" />
            <span class="opt-desc">{{ language['planner.planpanels.slope'] }}</span>
        </a>
        
        <a v-if="isAdmin()" v-on:click="pick('popularity');" data-option="popularity" ref="popularity" class="route-option pointer" :class="{active: opts.popularity}">
            <img src="/v2.5/img/heart--gray.svg" alt="Option icon" class="gray" />
            <img src="/v2.5/img/heart--green.svg" alt="Option icon" class="green" />
            <span class="opt-desc">{{ language['planner.planpanels.popularity'] }}</span>
        </a>
    </div>
    `,
    mounted: function(){
        dataStorage.data.graphDetailPanelControls = this;
    },
    data: function () {
        return {
            show: false,
            language: language,
            opts: {
                default: true,
                stress: false,
                // surface: false,
                surfaceSmoothness: false,
                popularity: false,
                slope: false,
                // airQuality: false,
            },
            win: window,
            params: window.parameters,
        }
    },
    methods: {
        pick: function(which){
            this.opts.default = this.opts.stress = this.opts.surfaceSmoothness = this.opts.slope = this.opts.popularity = false;
            this.opts[which] = true;
            dataStorage.data.graphDetailPanel.activeLayer = which;
        },
        isAdmin() {
            return dataStorage.data.userProfile.isAdmin();
        }
    }
});
;

/* File:  geolocator.vue*/

Vue.component('geolocator', {
    template: `
    <div id="geolocator" v-if="win.parameters.components.userLocator">
        <button aria-label="Geolocate" v-on:click="geolocate" class="btn btn-sm btn-link" style="position: absolute; right: 3px; top: 0; padding: 0; font-size: 15px; z-index: 25;"><i class="fa fa-location-arrow"></i></button>
    </div>
    `,
    mounted: function () {
        dataStorage.data.geolocator = this;
    },
    data: function () {
        return {
            city: null,
            cities: null,
            currentCity: null,
            initialized: false,
            win: window,
            hidden: true,
        };
    },
    methods: {
        geolocate: function(successCallback = null, failCallback = null) {
            var that = this;
            
            if (navigator.geolocation) {
                var opts = { timeout: 5000, enableHighAccuracy: true };

                navigator.geolocation.getCurrentPosition(location => {

                    let opts = {};
                    if (that.win.innerWidth <= 1500) {
                        let offset = -1 * ((that.win.innerWidth - (2 * 350)) / 2);
                        opts.paddingTopLeft = [offset, 0];
                    } // end if

                    mapboxMap.setView([location.coords.latitude, location.coords.longitude], 14, opts);
                    
                    that.win.router.semaphore = 'RED';
                    while (that.win.markers.length > 2) {
                        that.win.markers[0].remove();
                    } // end while
                    
                    // FIXME: lil hack
                    setTimeout(() => {
                        that.win.markers[0].remove();
                        that.win.markers[1].remove();
                    }, 100);
                    that.win.router.semaphore = 'GREEN';

                    if (successCallback) successCallback();
                }, function () {
                    console.log("The page could not detect the location. Sorry.");
                    if (failCallback) failCallback();
                    // alert("The page could not detect your location. Sorry.");
                }, opts);
            } else {
                // alert("Your browser does not support geolocation. Sorry.");
                console.log("This browser does not support geolocation. Sorry.");
                if (failCallback) failCallback();
            } // end if-else
        }
    },
});
;

/* File:  geolocation-modal.vue*/

Vue.component('geolocation-modal', {
    template: `
    <div id="geolocation-modal" v-if="parameters.components.geolocationMessage">
        <modal v-if="display" v-on:close="display = false" class="geolocation-modal">
            <div slot="header">
                <b>{{ language['modals.geolocation.head'] }}</b>
            </div>
            <div slot="body" v-html="language['modals.geolocation.body']">
                
            </div>

            <span slot="button" v-on:click="locateMe" aria-label="Locate me">
                <i class="fa fa-location-arrow"></i> {{ language['modals.geolocation.btn'] }}
            </span>
        </modal>
    </div>
    `,
    mounted: function(){
        dataStorage.data.geoModal = this;

        let now = parseInt(((new Date).getTime()/1000).toFixed(0));
        let shown = localStorage.getItem(this.key);

        if ( ! shown || (shown && (now - parseInt(shown)) > 86400*2 ) ) { // Every 2 days
            localStorage.setItem(this.key, now);
            if (this.win.innerWidth >= 1000) {
                this.display = true;    
            } // end if
        } // end if
    },
    data: function () {
        return {
            language: language,
            display: false,
            key: 'geolocation-modal',
            win: window,
            parameters: window.parameters
        }
    },
    methods: {
        locateMe: function() {
            dataStorage.data.geolocator.geolocate();
        }
    }
});;

/* File:  firebase-panel.vue*/

Vue.component('firebase-panel', {
    template: `
    <div id="firebase-panel" class="panel m-b-md" :class="{ hidden: 'expert' != userLevel }">
        <div class="row no-gutter">
            <div class="col-xs-9 ">
                <span>
                    UID: <strong id="firebaseUID"></strong>
                </span>
            </div>

            <div class="col-xs-3 text-right">
                <button id="tokenButton" class="btn btn-default btn-sm" type="button" title="Get Token">
                    Get Token
                </button>
            </div>
        </div>
    </div>
    `,
    data: function () {
        return {
            userLevel: parameters.userLevel
        }
    },
});;

/* File:  error-panel.vue*/

Vue.component('error-panel', {
    template: '<div id="error-panel" class="alert alert-danger m-b-md" style="display: none;"></div>'
});;

/* File:  edge-edit-form.vue*/

Vue.component('edge-edit-form', {
    template: `
    <div>
        <button class="btn btn-link cancel back" v-on:click="back()">
            <i class="fa fa-angle-left"></i>
        </button>
        
        <p class="text-center" style="font-weight: 500; margin-bottom: 50px; margin-top: -10px;">
            {{ map[editing] }}
        </p>

        <div class="one-feature">
        <h5 class="h5">Current status</h5>
            <div class="middle">
                <p>
                    {{ $parent.values[editing][safeKey(feature.properties[editing])].text }}
                </p>
                <img :src="$parent.values[editing][safeKey(feature.properties[editing])].img" :alt=" map[editing]" />
            </div>
        </div>

        <h5 class="h5" style="margin-bottom: 5px; font-weight: 500;">Proposed value</h5>

        <div v-on:click="select(key)" v-for="val, key in $parent.values[editing]" class="one-feature pickable" :class="{active: isActive(key, feature)}">
            <div class="middle">
                <p>
                    {{ val.text }}
                </p>
                <img :src="val.img" :alt=" map[editing]" />
            </div>
        </div>

        <div class="btns">
            <button class="btn btn-link btn-sm" v-on:click="back()">
                Cancel
            </button>
            <button style="float: right;" class="btn btn-success btn-sm" v-on:click="confirm()">
                Confirm
            </button>
        </div>

    </div>
    `,
    mounted: function(){
        dataStorage.data.edgeEditForm = this;
    },
    data: function () {
        return {
            selected: null,
            map: {
                blocker: 'Is blocked',
                stress: 'Traffic',
                surface: 'Surface',
                slopeEnum: 'Slope'
            }
        }
    },
    props: ["editing", "feature"],
    watch: {
        
    },
    methods: {
        back() {
            this.$parent.editing = null;
        },
        select(newValue) {
            this.selected = newValue;
        },
        isActive(key, feature) {
            if (this.selected === null) {
                if ("blocker" == this.editing) {
                    return feature.properties.blocker;
                } else {
                    return key == feature.properties[this.editing];
                } // end if-else
            } else {
                if ("blocker" == this.editing) {
                    // return this.selected;
                    if ("yes" == this.selected && "yes" == key) {
                        return true;
                    } else if ("no" == this.selected && "no" == key) {
                        return true;
                    } else {
                        return false;
                    } // end if-elself-else
                } else {
                    return key == this.selected;
                } // end if-else
            }
            
        },
        safeKey(key) {
            if (true === key) {
                return 'yes';
            } else if (false === key) {
                return 'no';
            } else {
                return key;
            } // end if-elseif-else
        }
    }
});;

/* File:  dynamic-legend.vue*/

Vue.component('dynamic-legend', {
    template: `
    <div id="dynamic-legend" class="dynamic-legend gray" :class="{hidden: ! shouldDisplay()}" v-html="content()">
        
    </div>
    `,
    mounted: function () {
        dataStorage.data.dynamicLegend = this;
    },
    data: function () {
        return {
            language: language,
            mode: 'default',
            aqLevels: [
                { color: '#0020f5', low: 0, high: 10, },
                { color: '#3e99f7', low: 11, high: 15, },
                { color: '#43962a', low: 16, high: 20, },
                { color: '#75fa4c', low: 21, high: 25, },
                { color: '#fffd54', low: 26, high: 30, },
                { color: '#f6bd41', low: 31, high: 35, },
                { color: '#ee6f2d', low: 36, high: 40, },
                { color: '#eb3223', low: 41, high: 45, },
                { color: '#8d1a10', low: 46, high: 50, },
                { color: '#5d0d07', low: 50, high: null, },
            ]
        }
    },
    methods: {
        shouldDisplay: function () {
            return 'default' === this.mode ? false : true;
        },
        setMode: function (mode) {
            this.mode = mode;
        },
        content: function () {
            let o = '';
            switch (this.mode) {
                case 'stress':
                    o += '<span class="desc">' + language['planner.legend.less_trafic'] + '</span>';
                    for (var i = 1; i <= 5; i++) {
                        o += '<span class="circle" style="background-color: ' + generate_geojson_color(i / 5) + ';"></span>';
                    } // end for
                    o += '<span class="desc">' + language['planner.legend.heavy_traffic'] + '</span>';
                    break;
                case 'popularity':
                    const map = {
                        0: generate_geojson_color(1),
                        1: generate_geojson_color(.75),
                        2: generate_geojson_color(.5),
                        3: generate_geojson_color(.15),
                        4: generate_geojson_color(-.5),
                        5: '#0000ff'
                    };

                    o += '<span class="desc">' + language['planner.legend.unpopular'] + '</span>';
                    for (var i = 0; i <= 5; i++) {
                        o += '<span class="circle" style="background-color: ' + map[i] + ';"></span>';
                    } // end for
                    o += '<span class="desc">' + language['planner.legend.popular'] + '</span>';
                    break;
                case 'surface':
                    o += '<span class="circle" style="background-color: #909090;"></span>';
                    o += '<span class="desc">' + language['planner.legend.paved_exl'] + '</span>';
                    o += '<span class="circle" style="background-color: #BCBCBC;"></span>';
                    o += '<span class="desc">' + language['planner.legend.paved'] + '</span>';
                    o += '<span class="circle" style="background-color: #FFDB7F;"></span>';
                    o += '<span class="desc">' + language['planner.legend.compacted'] + '</span>';
                    o += '<span class="circle" style="background-color: #AC8400;"></span>';
                    o += '<span class="desc">' + language['planner.legend.unpaved'] + '</span>';
                    o += '<span class="circle" style="background-color: #EE0000;"></span>';
                    o += '<span class="desc">' + language['planner.legend.bad'] + '</span>';
                    o += '<span class="circle" style="background-color: #5E0000;"></span>';
                    o += '<span class="desc">' + language['planner.legend.very_bad'] + '</span>';

                    o += '<span class="circle" style="background-color: #FFFFFF;"></span>';
                    o += '<span class="desc">' + language['planner.legend.unknown'] + '</span>';

                    break;
                case 'surfaceSmoothness':
                    o += '<span class="circle" style="background-color: ' + GeojsonStyler.getSurfaceColor('EXCELLENT') + ';"></span>';
                    o += '<span class="desc surface-smoothness">' + language['planner.legend.PAVED_EXCELLENT'] + '</span>';
                    o += '<span class="circle" style="background-color: ' + GeojsonStyler.getSurfaceColor('GOOD') + ';"></span>';
                    o += '<span class="desc surface-smoothness">' + language['planner.legend.PAVED_GOOD'] + '</span>';
                    o += '<span class="circle" style="background-color: ' + GeojsonStyler.getSurfaceColor('INTERMEDIATE') + ';"></span>';
                    o += '<span class="desc surface-smoothness">' + language['planner.legend.PAVED_BAD'] + '</span>';

                    o += '<br />';
                    
                    o += '<span class="circle" style="background-color: ' + GeojsonStyler.getSurfaceColor('BAD') + ';"></span>';
                    o += '<span class="desc surface-smoothness">' + language['planner.legend.UNPAVED_INTERMEDIATE'] + '</span>';
                    o += '<span class="circle" style="background-color: ' + GeojsonStyler.getSurfaceColor('HORRIBLE') + ';"></span>';
                    o += '<span class="desc surface-smoothness">' + language['planner.legend.UNPAVED_BAD'] + '</span>';
                    o += '<span class="circle" style="background-color: ' + GeojsonStyler.getSurfaceColor('IMPASSABLE') + ';"></span>';
                    o += '<span class="desc surface-smoothness">' + language['planner.legend.UNPAVED_HORRIBLE'] + '</span>';
                    o += '<br />';
                    o += '<span class="circle" style="background-color: #FFFFFF;"></span>';
                    o += '<span class="desc surface-smoothness">' + language['planner.legend.unknown'] + '</span>';

                    break;
                case 'slope':
                    o += '<span class="desc">' + language['planner.legend.flat'] + '</span>';
                    for (var i = 1; i <= 12; i++) {
                        o += '<span class="circle" style="background-color: ' + generate_geojson_color(i / 12) + ';"></span>';
                    } // end for
                    o += '<span class="desc">' + language['planner.legend.steep'] + '</span>';
                    break;

                case 'airQuality':
                    o += '<span class="desc">µg/m<sup>3</sup></span>';
                    var i = 0;
                    this.aqLevels.forEach(aqLvl => { i++;
                        if (5 == i) o += '<br />';
                            
                        o += `<span class="circle" style="background-color: ${aqLvl.color};"></span>`;
                        if (aqLvl.high) {
                            o += `<span class="desc">${aqLvl.low} - ${aqLvl.high}</span>`;
                        } else {
                            o += `<span class="desc">${aqLvl.low}+</span>`;    
                        }
                        
                    });

                    o += '<br />';
                    o += '<span class="circle" style="background-color: #FFFFFF;"></span>';
                    o += '<span class="desc">' + language['planner.legend.unknown'] + '</span>';
                    
                    break;
            } // end switch
            return o;
        }
    }
});;

/* File:  destination.vue*/

Vue.component('destination', {
    template: ''
});;

/* File:  debugger.vue*/

Vue.component('debugger', {
    template: `
    <div id="debugger" class="debugger" :class="{minimized: ! maximized, maximized: maximized, hidden: ! show}">
        <div class="header pointer" v-on:click="maximized = ! maximized;">
            <span class="minimize"></span>
            <div class="heading">Debugger</div>
        </div>
        <section class="instructions row">
            <div class="col-xs-12">
                <h6 class="h4">Instructions</h6>
                <button style="margin: 3px; position: relative; padding-left: 25px;" v-on:click="displayInstructions = ! displayInstructions" class="btn btn-sm debugger-layer-btn btn-primary">
                    <i v-if="!displayInstructions" style="font-size: 18px; position: absolute; top: 5px; left: 6px;" class="fa fa-square-o"></i> 
                    <i v-if="displayInstructions" style="font-size: 18px; position: absolute; top: 5px; left: 6px;" class="fa fa-check-square-o"></i> 
                    Show instructions
                </button>
            </div>
        </section>
        
        <section class="overrides row">
            <div class="col-xs-12">
                <h6 class="h4">Endpoints</h6>
                
                <label class="small">Routing API version</label>
                <select ref="apiVersion" class="form-control" v-on:change="changeApiVersion($event)">
                    <option :selected="'v5' == apiVersion" value="v5">v5</option>
                    <option :selected="'v7' == apiVersion" value="v7">v7</option>
                </select>

                <label class="small">Routing</label>
                <input class="form-control gray" ref="url" type="text" v-on:change="updateUrl" v-on:keyup="updateUrl" :placeholder="params.api.routing" />
                <label class="small">Rerouting</label>
                <input class="form-control gray" ref="urlRerouting" type="text" v-on:change="updateUrl" v-on:keyup="updateUrl" :placeholder="params.api.reRouting" />
                <label class="small">Routing edit</label>
                <input class="form-control gray" ref="urlEdit" type="text" v-on:change="updateUrl" v-on:keyup="updateUrl" :placeholder="params.api.routingEdit" />
                
                <label class="small">Key</label>
                <input class="form-control gray" ref="key" type="text" v-on:change="updateKey" v-on:keyup="updateKey" :placeholder="originalKey" />
                
                <label class="small">Bike sharing points</label>
                <input class="form-control gray" ref="urlBsPoints" type="text" v-on:change="updateUrl" v-on:keyup="updateUrl" :placeholder="params.api.bsPointsParams" />
                
                <label class="small">Bike sharing zones</label>
                <input class="form-control gray" ref="urlBsZones" type="text" v-on:change="updateUrl" v-on:keyup="updateUrl" :placeholder="params.api.bsZonesParams" />
            </div>
            <div class="col-xs-12" style="margin-top: 25px;">
                <label>
                    <b>Will use</b> <br />
                    <small>Routing</small><br /> <code class="small">{{ overrides.generatedUrl }}</code><br />
                    <small>Bike sharing points</small><br /> <code class="small">{{ overrides.bsPointsServerGeneratedUrl }}</code><br />
                    <small>Bike sharing zones</small><br /> <code class="small">{{ overrides.bsZonesServerGeneratedUrl }}</code>
                </label>
            </div>
        </section>
        <hr />
        <section class="overrides row">  
            <div class="col-xs-12">
                <h6 class="h4" style="margin-bottom: 0px;">Override request payload</h6>
                <a v-on:click="loadConfig();" class="pointer">Copy current request here ↓</a>
                <textarea rows="10" class="form-control gray" ref="request" v-on:keyup="updateRequest"></textarea>
                <label v-if="request.payload">
                    Syntax: {{ request.syntaxValid ? 'OK': 'ERROR' }}
                </label>
                <button v-if="request.payload && request.syntaxValid" v-on:click="getPlans" class="btn btn-primary btn-sm pull-right">getPlans();</button>
                <div v-if="lastRequest.url" style="margin-top: 25px;">
                    <label>
                        Last request<br />
                        <small>{{ lastRequest.method }}: {{ lastRequest.url }}</small>
                    </label>
                    <pre>{{ lastRequest.payload }}</pre>
                </div>
            </div>
        </section>
        <hr />
        <section class="overrides row">  
            <div class="col-xs-12">
                <h6 class="h4" style="margin-bottom: 0px;">Isochrones</h6>
                <label class="small">Endpoint URL</label>
                <input class="form-control gray" ref="isochronesUrl" type="text" :value="isochrones.url" :placeholder="isochrones.url" style="margin-bottom: 15px;" />
                <a v-on:click="prefillIsochronesRequest();" class="pointer">Copy default request here ↓</a>
                <textarea rows="10" class="form-control gray" ref="isochronesParams" placeholder=""></textarea>
                
                <button v-on:click="getIsochrones" class="btn btn-primary btn-sm pull-right">getIsochrones();</button>
            </div>
        </section>
        <hr />
        <section class="overrides row">  
            <div class="col-xs-12">
                <h6 class="h4" style="margin-bottom: 0px;">SOIs</h6>
                <label class="pointer">
                    <input type="checkbox" :checked="sois.enabled" v-on:change.prevent="toggleSois" />
                    Enabled
                </label>
                <br />
                <label class="small">Endpoint URL</label>
                <input class="form-control gray" ref="soisUrl" type="text" :value="sois.url" :placeholder="sois.url" style="margin-bottom: 15px;" />
                <a v-on:click="prefillSoisRequest();" class="pointer">Copy default request here ↓</a>
                <textarea rows="10" class="form-control gray" ref="soisParams" placeholder=""></textarea>
                
                <button v-on:click="getSois" class="btn btn-primary btn-sm pull-right">getSois();</button>
            </div>
        </section>
        <hr />
        <a class="pointer btn btn-link" style="margin: 0 0 20px 20px; color: #238ae6;" v-on:click="replan()">Open replanning import modal</a>
    </div>
    `,
    mounted: function () {
        dataStorage.data.debugger = this;
        this.$refs.url.value = this.params.api.routing;
        this.$refs.urlRerouting.value = this.params.api.reRouting;
        this.$refs.urlEdit.value = this.params.api.routingEdit;
        this.$refs.urlBsPoints.value = this.params.api.bsPointsParams;
        this.$refs.urlBsZones.value = this.params.api.bsZonesParams;
        this.updateUrl();
    },
    data: function () {
        return {
            apiVersion: undefined !== window.parameters.api.version ? window.parameters.api.version : 'v5',
            win: window,
            params: window.parameters,
            originalKey: window.parameters.api.key,
            show: window.parameters.debug && window.parameters.components.debugger,
            maximized: false,
            overrides: {
                server: null,
                generatedUrl: null,

                serverUrlEdit: null,
                generatedUrlEdit: null,

                serverUrlRerouting: null,
                generatedUrlRerouting: null,

                bsPointsServer: null,
                bsPointsServerGeneratedUrl: null,

                bsZonesServer: null,
                bsZonesServerGeneratedUrl: null,
            },
            request: {
                syntaxValid: null,
                payload: '',
            },
            lastRequest: {
                url: null,
                method: null,
                payload: null,
            },
            layers: {
                files: ['czech-poi.geojson', 'czech-popular.geojson'],
                enabled: [],
                colors: {
                    'czech-poi.geojson': '#00ff00',
                    'czech-popular.geojson': '#0000ff',
                },
                layers: {}
            },
            displayInstructions: null,
            isochrones: {
                url: window.parameters.api.isochrones,
                params: {
                    client: 'WEB',
                    key: window.parameters.api.key,
                    lat: '',
                    lon: '',
                    rangesInMinutes: 15,
                    climbs: '',
                    traffic: '',
                    contourSimplification: '',
                    stairs: '',
                    oneways: '',
                    pavements: '',
                    surface: '',
                },
                layers: [],
                colors: [
                    { color: '#A62CC4', fillColor: '#F5E7F9', fillOpacity: .2 },
                    { color: '#7934C5', fillColor: '#EFE8F7', fillOpacity: .2 },
                    { color: '#6342D7', fillColor: '#ECEBFC', fillOpacity: .2 },
                    { color: '#4D4BDA', fillColor: '#E8E8F9', fillOpacity: .2 },
                    { color: '#2B65C2', fillColor: '#E6EEF7', fillOpacity: .2 },
                    { color: '#3A84C3', fillColor: '#E7F2F8', fillOpacity: .2 },
                    { color: '#4CA6B4', fillColor: '#E6F4F8', fillOpacity: .2 },
                    { color: '#4EAC89', fillColor: '#E7F5F2', fillOpacity: .2 },
                    { color: '#55B96A', fillColor: '#E7F8EE', fillOpacity: .2 },
                    
                ]
            },
            sois: {
                url: window.parameters.api.segments,
                enabled: true
            }
        }
    },
    watch: {
        displayInstructions: function (newVal) {
            this.win.displayInstructions(newVal);
            if (newVal) {
                this.win.document.body.dataset.showManoeuvres = "true";
            } else {
                this.win.document.body.dataset.showManoeuvres = "false";
            } // end if-else
        }
    },
    methods: {
        changeApiVersion(ev) {
            this.apiVersion = ev.target.value;
            if (this.win.parameters) {
                
            } else {
                
            }
        },
        updateUrl: function () {
            this.overrides.server = this.$refs.url.value;
            this.overrides.serverUrlRerouting = this.$refs.urlRerouting.value;
            this.overrides.serverUrlEdit = this.$refs.urlEdit.value;
            this.overrides.bsPointsServer = this.$refs.urlBsPoints.value;
            this.overrides.bsZonesServer = this.$refs.urlBsZones.value;

            this.generateOverrideUrls();

            // this.overrides.generatedUrl = this.generateOverrideUrl();
            // this.overrides.bsPointsServerGeneratedUrl = this.generateBsPointsOverrideUrl();
            // this.overrides.bsZonesServerGeneratedUrl = this.generateBsZonesOverrideUrl();
        },
        updateKey: function () {
            let key = this.$refs.key.value;
            if (!key.length) {
                key = this.originalKey;
            } // end if
            this.params.api.key = key;
            axios.defaults.params['key'] = key;
        },
        generateOverrideUrls: function () {
            const map = {
                generatedUrl: 'server',
                generatedUrlEdit: 'serverUrlEdit',
                generatedUrlRerouting: 'serverUrlRerouting',
                bsPointsServerGeneratedUrl: 'bsPointsServer',
                bsZonesServerGeneratedUrl: 'bsZonesServer',
            };

            Array.from(Object.keys(map)).forEach(key => {
                let result = null;
                let val = map[key];

                if (this.overrides[val]) {
                    if (!this.overrides[val].match(/^https?:\/\//)) {
                        result = 'http://' + this.overrides[val];
                    } else {
                        result = this.overrides[val];
                    } // end if-else
                } else {
                    result = this.params.api.routing;
                } // end if

                this.overrides[key] = result;
            });
        },
        updateRequest: function () {
            this.request.payload = this.$refs.request.value;
            try {
                JSON.parse(this.request.payload);
                this.request.syntaxValid = true;
            } catch (error) {
                this.request.syntaxValid = false;
            }
        },
        getPlans: function () {
            router.semaphore = "RED";

            const request = JSON.parse(this.request.payload);

            if (null == markers[0].getLatLng() && request.origin.point) {
                markers[0].setLatLng(request.origin.point);
            } // end if
            if (null == markers[markers.length - 1].getLatLng() && request.destination.point) {
                markers[markers.length - 1].setLatLng(request.destination.point);
            } // end if

            router.semaphore = "GREEN";
            
            getPlans();
        },
        loadConfig: function () {
            const shell = {};
            let latLngs = [];

            for (let i = 0; i < this.win.markers.length; i++) {
                try {
                    let ll = this.win.markers[i].getLatLng();
                    latLngs[i] = ll ? ll : shell;
                } catch (e) {
                    latLngs[i] = shell;
                } // end try-catch
            }

            this.$refs.request.value = JSON.stringify(router.buildPlanningRequest(latLngs, true), null, 4);
            this.updateRequest();
        },
        /**
         * @deprecated
         * @param {String} file
         */
        toggleLayer(file) {
            var that = this;

            if (this.layers.enabled.includes(file)) {
                let index = this.layers.enabled.indexOf(file);
                this.layers.enabled.splice(index, 1);

                this.layers.layers[file].remove();
                this.layers.layers[file] = undefined;
            } else {
                this.layers.enabled.push(file);
                // Actually show layer

                let url = `/custom/js/json/${file}`;
                axios.get(url).then(res => {

                    const bounds = that.win.mapboxMap.getBounds();
                    let geojson = res.data;

                    let geoJsonLayer = L.geoJson(geojson, {
                        filter: function (el, layer) {
                            return (el.geometry.coordinates[0] <= bounds._northEast.lng && el.geometry.coordinates[0] >= bounds._southWest.lng && el.geometry.coordinates[1] <= bounds._northEast.lat && el.geometry.coordinates[1] >= bounds._southWest.lat)
                        },
                        onEachFeature: function (feature, layer) {
                            var popupContent = `<pre>${JSON.stringify(feature, null, 2)}</pre>`;

                            layer.bindPopup(popupContent);
                        },
                        pointToLayer: function (feature, latlng) {
                            return L.circleMarker(latlng, {
                                radius: 8,
                                fillColor: that.layers.colors[file],
                                color: "#000",
                                weight: 1,
                                opacity: 1,
                                fillOpacity: 0.8
                            });
                        }
                    }).addTo(that.win.mapboxMap);

                    this.layers.layers[file] = geoJsonLayer;
                });


            } // end if-else
        },
        buildsochronesRequest() {
            const center = this.win.mapboxMap.getCenter();
            let params = {};

            for (key in this.isochrones.params) {
                let val = this.isochrones.params[key];
                if ('lat' == key) val = center.lat;
                if ('lon' == key) val = center.lng;

                params[key] = val;
            } // end for

            return params;
        },
        prefillIsochronesRequest() {
            const params = this.buildsochronesRequest();
            let o = '';

            for (key in params) {
                const val = params[key];
                if (o.length) o += "\n";
                o += `${key}=${val}`;
            } // end for

            this.$refs.isochronesParams.value = o;
        },
        prefillSoisRequest() {
            if (!window.segmentsPainter) {
                return alert("SegmentsPainter was not initialized.");
            } // end if

            const params = window.segmentsPainter.buildPayload();
            let o = '';

            for (key in params) {
                // if ("key" != key) {
                    const val = params[key];
                    if (o.length) o += "\n";
                    o += `${key}=${val}`;    
                // } // end if
            } // end for

            this.$refs.soisParams.value = o;
        },
        buildIsochronesRequest() {
            let url = '';
            var params = {};

            if (this.$refs.isochronesParams.value.length > 0) {
                const rows = this.$refs.isochronesParams.value.split("\n");

                for (let i = 0; i < rows.length; i++) {
                    const row = rows[i].split('=');
                    if (undefined === params[row[0]]) {
                        params[row[0]] = row[1]; 
                    } else {
                        params[row[0]] = [params[row[0]], row[1]]
                    }
                    
                } // end for

            } else {
                const center = this.win.mapboxMap.getCenter();
                params = this.buildsochronesRequest();
                params.key = this.params.api.key;
                params.lat = center.lat;
                params.lon = center.lng;
            } // end if-else

            // Auto-injected by Axios
            delete params.key;

            let n = 0;
            for (key in params) {
                if (params[key].length !== 0) {
                    let glue = (0 === n ? '?' : '&');
                    
                    if ('object' == typeof params[key]) {
                        params[key].forEach(val => {
                            url += `${glue}${key}=${val}`;    
                            ++n;
                        });
                    } else {
                        url += `${glue}${key}=${params[key]}`;    
                    } // end if-else
                    
                    ++n;
                } // end if
            } // end for

            return url;
        },
        getSois() {
            if (!window.segmentsPainter) {
                return alert("SegmentsPainter was not initialized.");
            } // end if
            
            window.segmentsPainter.paint();
        },
        toggleSois() {
            this.sois.enabled = ! this.sois.enabled;
            this.getSois();
        },
        getIsochrones() {
            const that = this;

            var endpoint = '';
            if (this.$refs.isochronesUrl.value.length) {
                endpoint = this.$refs.isochronesUrl.value;
            } else {
                endpoint = this.isochrones.url;
            } // end if-else

            const query = this.buildIsochronesRequest();

            const url = endpoint + query;

            axios.get(url).then(res => {
                that.paintIsochrones(res.data);
            }).catch(ex => {
                throw ex;
                
            });
        },
        paintIsochrones(data = null) {
            const that = this;

            for (key in this.isochrones.layers) {
                that.win.mapboxMap.removeLayer(this.isochrones.layers[key]);
            } // end for

            if (data.features.length) {
                var i = 0;
                data.features.forEach(feature => {
                    
                    // Rotate colors
                    if ('undefined' == typeof this.isochrones.colors[i]) {
                        i = 0;
                    } // end if
                    
                    const opts = this.isochrones.colors[i];

                    let coordinates = [];
                    feature.geometry.coordinates[0].forEach(coords => {
                        coordinates.push(L.latLng(coords[1], coords[0]));
                    });

                    const polygon = L.polygon(coordinates, opts);
                    // polygon._isochrone_id = `isochrone__${get_random_string()}`;
                    that.isochrones.layers.push(polygon);
                    that.win.mapboxMap.addLayer(polygon);
                    
                    ++i;
                });
            } // end if
        },
        replan() {
            dataStorage.data.replanner.openModal();
        }
    }
});

;

/* File:  copyright.vue*/

Vue.component('copyright', {
    template: `
    <div id="copyright" class="text-center">
        <small class="gray">
            © {{year}} {{language['meta_author']}}
        </small>
    </div>
    `,
    mounted: function(){
        dataStorage.data.copyright = this;
    },
    data: function(){
        return {
            language: language,
            year: (new Date).getFullYear()
        };
    },
});;

/* File:  cookies.vue*/

Vue.component('cookies', {
    template: `
    <div id="cookies" class="cookies" :class="{hidden: ! show}">
        <b>Cookies</b>: {{ language['planner.cookies.message'] }} <button v-on:click="close(); return false;" class="btn btn-primary btn-xs">OK</button>
    </div>
    `,
    mounted: function(){
        dataStorage.data.cookies = this;
        if ( 'localStorage' in window && ! window.localStorage.getItem(this.lsKey) ) {
            this.show = true;
        } // end if;
    },
    data: function () {
        return {
            language: language,
            show: false,
            lsKey: 'planner_cookies_v290',
        }
    },
    methods: {
        close: function(){
            this.show = false;
            if ( 'localStorage' in window ) {
                window.localStorage.setItem(this.lsKey, 1);
            } // end if
        },
    }
});;

/* File:  city-picker.vue*/

Vue.component('city-picker', {
    template: `
    <div id="city-picker" style="">
        <button v-on:click="hidden = ! hidden" class="btn btn-sm btn-link" style="position: absolute; right: 3px; top: 0; padding: 0; font-size: 10px; z-index: 25;">{{ hidden ? this.getCityName() : 'Hide cities' }}</button>
        <div :class="{hidden: hidden}" style="margin-top: 25px;">
            <div class="col-sm-2 text-center no-padding">
                <img src="/v2.5/img/resources/city--gray.svg" alt="City icon" class="margin-top-6">
            </div>
            <div class="col-sm-10 right-side" style="padding-left: 5px;">
                <div class="form-group">
                    <select class="form-control gray" v-on:change="onChange" ref="city">
                        <option v-for="city in cities" :value="city.id" :selected="currentCity == city.id">{{ city.nameEN }}</option> 
                    </select>
                </div>
                <span data-toggle="tooltip" data-html="true" data-placement="left" title="" class="custom-tooltip not-quite-down" data-original-title="Pick in which city you wish to test our demo app."><i class="fa fa-info-circle gray"></i></span>
            </div>
        </div>
    </div>
    `,
    mounted: function () {
        dataStorage.data.cityPicker = this;
        this.init();
    },
    methods: {
        getCityName: function() {
            if (null === this.city) {
                return parameters.cities[0].name;
            } else {
                return this.city.nameEN;
            } // end if-else
        },
        onChange: function () {
            var that = this;
            let val = this.$refs.city.value;
            for (let city of this.cities) {
                if (city.id == val) {
                    this.city = city;
                    this.currentCity = city.id;

                    let opts = {};
                    if (window.innerWidth <= 1500) {
                        let offset = -1 * ((window.innerWidth - (2 * 350)) / 2);
                        opts.paddingTopLeft = [offset, 0];
                    } // end if

                    mapboxMap.setView([city.center.lat, city.center.lon], city.center.zoom, opts);
                    
                    that.win.router.semaphore = 'RED';
                    while (that.win.markers.length > 2) {
                        that.win.markers[0].remove();
                    } // end while
                    // FIXME: lil hack
                    setTimeout(() => {
                        that.win.markers[0].remove();
                        that.win.markers[1].remove();
                    }, 100);
                    that.win.router.semaphore = 'GREEN';

                    break;
                } // end if
            } // end for
        },
        init: function (callback = null) {
            let that = this;

            if ( that.cities && 'function' == typeof callback ) {
                callback();
            } // end if
            
            axios.get('/v2.5/js/cities.json').then((res) => {
                that.cities = res.data;

                if ( that.currentCity ) {
                    for (let city of that.cities) {
                        if (city.id == that.currentCity) {
                            dataStorage.data.journeyTypeSwitch.pois = city.pois;
                            break;
                        } // end if
                    } // end for
                } // end if
            }).finally(() => {
                if ( 'function' == typeof callback ) {
                    callback();
                } // end if
            });

            // $.get('/v2.5/js/cities.json?v=3', (res) => {
            //     that.cities = res;

            //     if ( that.currentCity ) {
            //         for (let city of that.cities) {
            //             if (city.id == that.currentCity) {
            //                 dataStorage.data.journeyTypeSwitch.pois = city.pois;
            //                 break;
            //             } // end if
            //         } // end for
            //     } // end if
            //     if ( 'function' == typeof callback ) {
            //         callback();
            //     } // end if
            // });

            let key = 'city--';
            let city = null;

            for (let cls of Array.from(document.body.classList)) {
                if (cls.indexOf(key) >= 0) {
                    city = cls.replace(key, '');

                    that.currentCity = city;

                    break;
                } // end if
            } // end for
        }
    },
    watch: {
        city: function (newVal, oldVal) {
            if (null !== newVal) {
                dataStorage.data.journeyTypeSwitch.pois = this.city.pois;
            } // end if
        }
    },
    data: function () {
        return {
            city: null,
            cities: null,
            currentCity: null,
            initialized: false,
            win: window,
            hidden: true,
        };
    }
});;

/* File:  bounds-modal.vue*/

Vue.component('bounds-modal', {
    template: `
    <div id="bounds-modal" class="bounds-modal modal-hide-footer">
        <modal v-if="display" v-on:close="display = false">
            <div slot="header">
                <b>Test Cyclers in your region</b>
            </div>
            <div slot="body">
                <p>
                    Do you want to test Cyclers in another region? <br /><br />
                    Contact us at <a href="mailto:info@umotional.com?subject=Test Cyclers in another area">info@umotional.com</a> and we will unlock it for you!
                </p>
            </div>
            <div slot="footer">
                <p class="text-center">
                    
                </p>
            </div>
            <span slot="button">
                Continue
            </span>
        </modal>
    </div>
    `,
    mounted: function(){
        dataStorage.data.boundsModal = this;
    },
    data: function () {
        return {
            language: language,
            display: false,
        }
    },
});;

/* File:  bg-map.vue*/

Vue.component('bg-map', {
    template: '<div id="map" ref="map" :class="{ \'mobile-visible\': mobileVisible }"></div>',
    created: function(){
        
    },
    mounted: function(){
        dataStorage.data.map = this;
    },
    data: function(){
        return {
            mobileVisible: false,
            // shrinked: false,
        }
    }
    
});;

/* File:  bg-map-toggle-warnings.vue*/

Vue.component('bg-map-toggle-warnings', {
    template: `
    <div id="bg-map-toggle-warnings" :class="{active: active}" :title="language['planner.toggle_route_warnings']" data-toggle="tooltip">
        <div class="leaflet-bar leaflet-control">
            <a v-on:click="openModal" class="leaflet-control-toggle-warnings pointer">
                <i class="fa fa-exclamation-triangle"></i>
            </a>
        </div>
    </div>
    `,
    data: function () {
        return {
            language: language,
            active: false,
            doc: document,
        }
    },
    methods: {
        openModal: function() {
            dataStorage.data.markersModal.display = true;
        },
        toggle: function(){
            this.active = ! this.active;
            if ( this.active ) {
                this.doc.body.classList.add('hide-warnings');
            } else {
                this.doc.body.classList.remove('hide-warnings');
            } // end if-else
        }
    }
});;

/* File:  bg-map-toggle-isochrones.vue*/

Vue.component('bg-map-toggle-isochrones', {
    template: `
    <div v-if="enabled" :style="{top: stylesheet.top}" id="bg-map-toggle-isochrones" :class="{active: active}" :title="language['toggle_isochrones']" data-toggle="tooltip">
        <div class="leaflet-bar leaflet-control">
            <a v-on:click="toggle" class="leaflet-control-isochrones pointer">
                <img src="/v2.5/img/resources/pentagon.svg" alt="Isochrone" style="position: relative; top: 2px;">
            </a>
        </div>
    </div>
    `,
    mounted() {
        dataStorage.data.isochronesToggle = this;
    },
    data: function () {
        if (window.parameters.components.isochrones) {
            window.topMapControlSlotsUsed++;    
        } // end if
        
        const top = 232 + (49 * (window.topMapControlSlotsUsed - 4));

        const autoInit = (true === window.parameters.components.isochronesAutoinit ? true : false);

        return {
            enabled: window.parameters.components.isochrones,
            language: language,
            active: autoInit,
            doc: document,
            win: window,
            params: parameters,
            stylesheet: {
                top: `${top}px`
            }
        }
    },
    methods: {
        toggle: function(){
            this.active = ! this.active;
            if (this.active) {
                dataStorage.data.isochrones.getIsochrones();    
            } else {
                dataStorage.data.isochrones.paintIsochrones(false);
            } // end if
        }
    }
});;

/* File:  bg-map-toggle-air-pollution.vue*/

Vue.component('bg-map-toggle-air-pollution', {
    template: `
    <div v-if="params.components.airQuality" :style="{top: stylesheet.top}" id="bg-map-toggle-air-pollution" :class="{active: active}" :title="language['transport.toggle_air_quality']" data-toggle="tooltip">
        <div class="leaflet-bar leaflet-control">
            <a v-on:click="toggle" class="leaflet-control-air-pollution pointer">
                <img src="/v2.5/img/resources/cloud--darkblue.svg" alt="Cloud icon" style="">
            </a>
        </div>
    </div>
    `,
    mounted() {
        dataStorage.data.pollutionToggle = this;
    },
    data: function () {
        if (window.parameters.components.airQuality) {
            window.topMapControlSlotsUsed++;
        } // end if
        
        const top = 232 + (49 * (window.topMapControlSlotsUsed - 4));

        return {
            language: language,
            active: false,
            doc: document,
            win: window,
            params: parameters,
            stylesheet: {
                top: `${top}px`
            }
        }
    },
    methods: {
        toggle: function(){
            this.active = ! this.active;
            dataStorage.data.airPollution.showAirQuality = this.active;
            if (this.active) {
                if (this.win.mapboxMap.getZoom() > 14) {
                    this.win.mapboxMap.setZoom(13);
                } // end if
            } else {
                // Nuffin to do
            } // end if-else
        }
    }
});;

/* File:  bg-map-logger.vue*/

Vue.component('bg-map-logger', {
    template: `
    <div id="logger" class="panel text-center" :class="{empty: empty, 'type-error': 'error' == type, 'type-warning': 'warning' == type}">
        <template v-if="msg">
            <i class="fa fa-exclamation-triangle" aria-hidden="true"></i>
            {{ msg.text }}
        </template>
    </div>
    `,
    mounted() {
        dataStorage.data.logger = this;
    },
    data: function () {
        return {
            language: language,
            parameters: window.parameters,
            empty: true,
            msg: null,
            type: "error",
            timeout: null,
            delay: 5000
        }
    },
    methods: {
        log(msg, type = "error") {
            const self = this;

            this.msg = msg;
            this.type = type;
            this.empty = false;
            if (this.timeout) clearTimeout(this.timeout);

            this.timeout = setTimeout(() => {
                self.empty = true;
                setTimeout(() => {
                    self.msg = null;
                }, 1000);
            }, this.delay);
        }
    }
});;

/* File:  bg-map-legend.vue*/

Vue.component('bg-map-legend', {
    template: `
    <div id="legend" class="row panel text-center p-h-10 gray" :class="{hidden: ! parameters.components.legend}">
        <div class="col-sm-4">
            <div>
                {{ language['planner.legend.cycleway'] }}
            </div>
            <div style="border-bottom: 3px solid hsl(88, 100%, 35%); height: 0.5em; width: 100%;"></div>
        </div>
        <div class="col-sm-4">
            <div>
                {{ language['planner.legend.cyclelane'] }}
            </div>
            <div style="border-bottom: 3px dashed hsl(88, 100%, 35%); height: 0.5em; width: 100%;"></div>
        </div>
        <div class="col-sm-4">
            <div>
                {{ language['planner.legend.softlane'] }}
            </div>
            <div style="border-bottom: 3px dotted hsl(88, 100%, 35%); height: 0.5em; width: 100%;"></div>
        </div>
    </div>
    `,
    data: function () {
        return {
            language: language,
            parameters: window.parameters
        }
    },
});;

/* File:  bg-map-edit.vue*/

Vue.component('bg-map-edit', {
    template: `
    <div v-if="params.components.graphEdit" :style="{top: stylesheet.top}" id="bg-map-edit" :class="{active: active}" :title="language['planner.graph_edit']" data-toggle="tooltip">
        <div class="leaflet-bar leaflet-control">
            <a v-on:click="toggleEdit" class="leaflet-control-toggle-warnings pointer">
                <i class="fa fa-pencil"></i>
            </a>
        </div>
    </div>
    `,
    mounted() {
        dataStorage.data.mapEditBtn = this;
    },
    data: function () {
        if (window.parameters.components.graphEdit) {
            window.topMapControlSlotsUsed++;    
        } // end if
        
        const top = 232 + (49 * (window.topMapControlSlotsUsed - 4));

        return {
            params: parameters,
            language: language,
            active: false,
            doc: document,
            stylesheet: {
                top: `${top}px`
            }
        }
    },
    methods: {
        toggleEdit: function() {
            if (this.active) {
                dataStorage.data.graphDetailPanel.disable();
            } else {
                if (dataStorage.data.userProfile.hasUser()) {
                    dataStorage.data.userProfile.graphEdit();
                } else {
                    dataStorage.data.userProfile.showModal();
                } // end if-else
            } // end if-else
        }
    }
});;

/* File:  bg-inspector.vue*/

Vue.component('bg-inspector', {
    template: `
    <div v-if="params.components.inspector" style="right: 10px; bottom: 120px; position: fixed;" id="bg-inspector" :class="{active: active}" title="Inspector" data-toggle="tooltip">
        <div class="leaflet-bar leaflet-control">
            <a v-on:click="toggle" class="leaflet-control-toggle-warnings pointer">
                <i class="fa fa-user-secret"></i>
            </a>
        </div>
    </div>
    `,
    mounted() {
        dataStorage.data.inspectorBtn = this;
    },
    data: function () {
        return {
            params: parameters,
            language: language,
            active: false,
            doc: document,
            stylesheet: {
                bottom: `100px`
            }
        }
    },
    methods: {
        toggle: function() {
            if (dataStorage.data.inspector.isActive()) {
                dataStorage.data.inspector.close();
            } else {
                dataStorage.data.inspector.open();
            } // end if-else
            
            // this.active = dataStorage.data.inspector.isActive();
        }
    }
});;

/* File:  bg-brush.vue*/

Vue.component('bg-brush', {
    template: `
    <div v-if="params.components.pallete" style="right: 10px; bottom: 70px; position: fixed; z-index: 999;" id="bg-brush" :class="{active: active}" title="brush" data-toggle="tooltip">
        <div class="leaflet-bar leaflet-control">
            <a v-on:click="toggle" class="leaflet-control-toggle-warnings pointer">
                <i class="fa fa-paint-brush"></i>
            </a>
        </div>
    </div>
    `,
    mounted() {
        dataStorage.data.brush = this;
    },
    data: function () {
        return {
            params: parameters,
            language: language,
            active: false,
        }
    },
    methods: {
        toggle: function() {
            dataStorage.data.pallete.toggle();
            this.active = dataStorage.data.pallete.isActive();
        }
    }
});;

/* File:  air-pollution.vue*/

Vue.component('air-pollution', {
    template: `
    <div id="air-pollution">
        <div class="aq-legend" :class="{hidden: ! showAirQuality}">
            <div class="row">
                <div class="line thin">
                    microgram/m<sup>3</sup>
                </div>
                <div v-for="level in aqLevels" class="line one-item">
                    <div class="color pull-left" :style="{'background-color': level.color}"></div>
                    <div v-if="null !== level.high" class="value pull-left">{{ level.low }} - {{ level.high }}</div>
                    <div v-if="null === level.high" class="value pull-left"> > {{ level.low }}</div>
                </div>
            </div>
        </div>
    </div>
    `,
    mounted: function () {
        dataStorage.data.airPollution = this;
    },
    data: function () {
        return {
            language: language,
            showAirQuality: false,
            airqLayer: null,
            win: window,
            aqLevels: [
                { color: '#0020f5', low: 0, high: 10, },
                { color: '#3e99f7', low: 11, high: 15, },
                { color: '#43962a', low: 16, high: 20, },
                { color: '#75fa4c', low: 21, high: 25, },
                { color: '#fffd54', low: 26, high: 30, },
                { color: '#f6bd41', low: 31, high: 35, },
                { color: '#ee6f2d', low: 36, high: 40, },
                { color: '#eb3223', low: 41, high: 45, },
                { color: '#8d1a10', low: 46, high: 50, },
                { color: '#5d0d07', low: 50, high: null, },
            ]
        };
    },
    watch: {
        showAirQuality: function (newVal) {
            this.refreshAirQuality();
        }
    },
    methods: {
        refreshAirQuality: function () {
            this.removeAirqLayer();

            if (this.showAirQuality) {
                let map = this.win.mapboxMap;
                let time = dataStorage.data.settingsDatetime.getDtFormatted(true);
                let h1 = time.replace(/\:.*/, '');
                let h2 = parseInt(h1) + 1;
                
                if (h2 > 23) h2 = 0;

                let interval = `${h1}${pad_time(h2.toString())}`;
                // let season = dataStorage.data.settingsSeasons.getSeason();
                season = 'spring';

                let source = `umotionals.${season}${interval}UTC`;
                
                let layerConfig = {
                    opacity: .7,
                    zIndex: 10,
                };

                let layer = L.mapbox.tileLayer(source, layerConfig);
                map.addLayer(layer);
                this.airqLayer = layer;
            } // end if-else
        },
        removeAirqLayer: function(){
            if ( this.airqLayer ) {
                this.win.mapboxMap.removeLayer(this.airqLayer);
                this.airqLayer = null;
            } // end if
        }
    }
});;

/* Custom file:  modal-other-projects.vue*/

Vue.component('modal-other-projects', {
    template: `
    <div id="modal-other-projects" class="modal-hide-footer">

        <modal v-if="display" v-on:close="display = false">
            <div slot="header">
                <b>{{ language['menu.nextprojects'] }}</b>
            </div>
            <div slot="body">
                
                <p>{{ language['nextprojects.info'] }}</p>

                <div class="row" style="margin-top: 40px">
                    <div class="col-sm-3 text-center">

                        <div class="row" style="height: 200px">
                            <div class="col-xs-12">
                                <a href="https://www.cistoustopou.cz" target="_blank">
                                    <img src="https://www.cistoustopou.cz/themes/custom/cimo/images/logo.svg" style="max-width: 100%">
                                </a>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-xs-12">Čistou stopou Prahou</div>
                        </div>
                    </div>

                    <div class="col-sm-3 text-center">

                        <div class="row" style="height: 200px; padding-top: 40px;">
                            <div class="col-xs-12">
                                <a href="https://www.zmente.to" target="_blank">
                                    <img src="https://www.zmente.to/img/logo_zmente.png" style="max-width: 100%">
                                </a>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-xs-12">Změňte.to</div>
                        </div>
                    </div>

                    <div class="col-sm-3 text-center">

                        <div class="row" style="height: 200px; padding-top: 40px;">
                            <div class="col-xs-12">
                                <a href="https://poladprahu.cz" target="_blank">
                                    <img src="https:/poladprahu.cz/wp-content/uploads/2019/10/cropped-logo-1-192x192.png" style="max-width: 100%">
                                </a>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-xs-12">Polaď Prahu</div>
                        </div>
                    </div>

                    <!-- 
                    <div class="col-sm-3 text-center">

                        <div class="row" style="height: 200px">
                            <div class="col-xs-12">
                                <a href="https://www.ekologis.cz" target="_blank">
                                    <img src="https://www.ekologis.cz/images/logo.png" style="max-width: 100%">
                                </a>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-xs-12">{{ language['nextprojects.ekologis'] }}</div>
                        </div>
                    </div>
                    -->
                </div>

            </div>
            <div slot="footer">
                <p class="text-center">
                    
                </p>
            </div>
            <span slot="button">
                {{ language['continue'] }}
            </span>
        </modal>

    </div>
    `,
    mounted: function(){
        dataStorage.data.modalOtherProjects = this;
    },
    data: function () {
        return {
            display: false,
            language: language,
            userLevel: parameters.userLevel,
            parameters: parameters,
            lang: parameters.lang
        }
    },
    methods: {
        open: function(){
            this.display = true;
        },
        close: function(){
            this.display = false;
        }
    }
});;