<%- css("/css/32d996e4.css")%>

<div class="roadmap">
  <div class="timeline-bar">
    <div id="segmented-control-container"></div>
    <section>
      <button class="button" id="year-dropdown" data-prefix-icon=''>
        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24">
          <g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <path d="M11.795 21H5a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v4"></path>
            <circle cx="18" cy="18" r="4"></circle>
            <path d="M15 3v4"></path>
            <path d="M7 3v4"></path>
            <path d="M3 11h16"></path>
            <path d="M18 16.496V18l1 1"></path>
          </g>
        </svg>
        <span><%= page.initYear %></span>
        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24">
          <path d="M6 9l6 6l6-6" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
        </svg>
      </button>
      <button class="button" id="tody-button" style="display: none;" class="tip left" data-tip="<%- __('tip-roadmap-today') %>">
        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24">
          <g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <circle cx="12" cy="12" r=".5" fill="currentColor"></circle>
            <circle cx="12" cy="12" r="9"></circle>
          </g>
        </svg>
        <span><%- __('text-today') %></span>
      </button>
    </section>
  </div>
  <div id="gantt-container" class="scrollbar-obtrusive"></div>
</div>


<script>
  window.roadmapYears = JSON.parse('<%- road_to_json(page.years) %>')
  window.initYear = '<%= page.initYear %>'
</script>


<%- js("/js/a72b5856.js")%>