<div id="heroku-cookie-banner"></div>

<header id="header" data-uuid="<%= glostick_user_id %>">
  <nav id="navigation" role="navigation">
    <span class="mobile-nav" aria-hidden="true">
      Show nav
      <span></span>
      <span></span>
      <span></span>
      <span></span>
    </span>

    <div class="wrapper-full">
      <div id="logo">
        <a href="<%= Bookends::Config.host_www %>/home">Heroku</a>
      </div>
      <div class="nav-wrapper">
        <ul class="main-nav">
          <li class="has-dropdown">
            <a href="<%= Bookends::Config.host_www %>/products">Products</a>
            <ul class="dropdown">
              <li class="has-dropdown"><a class="bookends-icon platform" href="<%= Bookends::Config.host_www %>/platform">Heroku Platform</a>
                <ul class="dropdown">
                  <li class="has-dropdown"><a class="bookends-icon dx" href="<%= Bookends::Config.host_www %>/dx">Heroku DX</a>
                    <ul class="dropdown wide">
                      <li><a class="bookends-icon flow" href="<%= Bookends::Config.host_www %>/flow">Heroku Flow</a></li>
                      <li><a class="bookends-icon cd" href="<%= Bookends::Config.host_www %>/continuous-delivery">Continuous Delivery</a></li>
                      <li><a class="bookends-icon ci" href="<%= Bookends::Config.host_www %>/continuous-integration">Continuous Integration</a></li>
                    </ul>
                  </li>
                  <li><a class="bookends-icon opex" href="<%= Bookends::Config.host_www %>/platform/opex">Heroku OpEx</a></li>
                  <li class="has-dropdown"><a class="bookends-icon runtime" href="<%= Bookends::Config.host_www %>/platform/runtime">Heroku Runtime</a>
                    <ul class="dropdown">
                      <li><a class="bookends-icon dyno" href="<%= Bookends::Config.host_www %>/dynos">Heroku Dynos</a></li>
                    </ul>
                  </li>
                </ul>
              </li>
              <li class="has-dropdown">
                <a class="bookends-icon data" href="<%= Bookends::Config.host_www %>/managed-data-services">Heroku Data Services</a>
                <ul class="dropdown wide">
                  <li><a class="bookends-icon postgres" href="<%= Bookends::Config.host_www %>/postgres">Heroku Postgres</a></li>
                  <li><a class="bookends-icon redis" href="<%= Bookends::Config.host_www %>/redis">Heroku Redis</a></li>
                  <li><a class="bookends-icon kafka" href="<%= Bookends::Config.host_www %>/kafka">Apache Kafka on Heroku</a></li>
                </ul>
              </li>
              <li class="has-dropdown">
                <a class="bookends-icon enterprise" href="<%= Bookends::Config.host_www %>/enterprise">Heroku Enterprise</a>
                <ul class="dropdown wide">
                  <li><a class="bookends-icon spaces" href="<%= Bookends::Config.host_www %>/private-spaces">Heroku Private Spaces</a></li>
                  <li><a class="bookends-icon connect" href="<%= Bookends::Config.host_www %>/connect">Heroku Connect</a></li>
                  <li><a class="bookends-icon shield" href="<%= Bookends::Config.host_www %>/shield">Heroku Shield</a></li>
                </ul>
              </li>
              <li><a class="bookends-icon teams" href="<%= Bookends::Config.host_www %>/teams">Heroku Teams</a></li>
            </ul>
          </li>
          <li class="has-dropdown">
            <a href="<%= Bookends::Config.host_elements %>">Marketplace</a>
            <ul class="dropdown">
              <li><a class="bookends-icon addons" href="<%= Bookends::Config.host_elements %>/addons">Add-ons</a></li>
              <li><a class="bookends-icon buttons" href="<%= Bookends::Config.host_elements %>/buttons">Buttons</a></li>
              <li><a class="bookends-icon buildpacks" href="<%= Bookends::Config.host_elements %>/buildpacks">Buildpacks</a></li>
              <li><a class="bookends-icon elements" href="<%= Bookends::Config.host_www %>/elements">About</a></li>
            </ul>
          </li>
          <li><a id="pricing-head" href="<%= Bookends::Config.host_www %>/pricing">Pricing</a></li>
          <li><a id="doc-head" href="<%= Bookends::Config.host_dev_center %>">Documentation</a></li>
          <li><a href="<%= Bookends::Config.host_www %>/support">Support</a></li>
          <li class="has-dropdown">
            <a class="nav-more" href="#">More</a>
            <div class="dropdown more">
              <section class="more-resources">
                <span class="more-title">Resources</span>
                <ul>
                  <li><a href="<%= Bookends::Config.host_www %>/what">What is Heroku?</a></li>
                  <li><a href="<%= Bookends::Config.host_www %>/help">Help</a></li>
                  <li><a href="<%= Bookends::Config.host_www %>/customers">Customers</a></li>
                  <li><a href="<%= Bookends::Config.host_www %>/careers">Careers</a></li>
                  <li><a href="<%= Bookends::Config.host_www %>/events">Events</a></li>
                  <li><a href="<%= Bookends::Config.host_www %>/podcasts">Podcasts</a></li>
                  <li><a href="<%= Bookends::Config.host_www %>/compliance">Compliance Center</a></li>
                </ul>
              </section>
              <section class="more-heroku-is">
                <span class="more-title">Heroku is for</span>
                <ul>
                  <li><a href="<%= Bookends::Config.host_www %>/developers">Developers</a></li>
                  <li><a href="<%= Bookends::Config.host_www %>/ctos">CTOs</a></li>
                  <li><a href="<%= Bookends::Config.host_www %>/team-collaboration">Team Collaboration</a></li>
                  <li><a href="<%= Bookends::Config.host_www %>/startups">Startups</a></li>
                  <li><a href="<%= Bookends::Config.host_www %>/enterprises">Enterprises</a></li>
                  <li><a href="<%= Bookends::Config.host_www %>/agencies">Agencies</a></li>
                  <li><a href="<%= Bookends::Config.host_www %>/students">Students</a></li>
                  <li><a href="<%= Bookends::Config.host_www %>/solutions">See More</a></li>
                </ul>
              </section>
              <section class="more-languages">
                <span class="more-title">Languages</span>
                <ul>
                  <li><a href="<%= Bookends::Config.host_www %>/nodejs">Node</a></li>
                  <li><a href="<%= Bookends::Config.host_www %>/ruby">Ruby</a></li>
                  <li><a href="<%= Bookends::Config.host_www %>/java">Java</a></li>
                  <li><a href="<%= Bookends::Config.host_www %>/php">PHP</a></li>
                  <li><a href="<%= Bookends::Config.host_www %>/python">Python</a></li>
                  <li><a href="<%= Bookends::Config.host_www %>/go">Go</a></li>
                  <li><a href="<%= Bookends::Config.host_www %>/scala">Scala</a></li>
                  <li><a href="<%= Bookends::Config.host_www %>/clojure">Clojure</a></li>
                  <li><a href="<%= Bookends::Config.host_www %>/languages">See More</a></li>
                </ul>
              </section>
              <section id="more-blog" class="more-blog">
                <span class="more-title">Latest News from the Heroku Blog</span>
                <h3><a class="js-blog-link" href="https://blog.heroku.com">Heroku Blog</a></h3>
                <p class="js-blog-date"></p>
                <p class="js-blog-content">Find out what's new with Heroku on our blog.</p>
                <a class="button btn btn-default btn-sm btn-inline" href="<%= Bookends::Config.host_blog %>/news">More news</a>
                <a class="button btn-inline" href="<%= Bookends::Config.host_blog %>">View all blog posts</a>
              </section>
            </div>
          </li>
        </ul>

        <ul class="tool-nav">
          <% unless current_page?('/search') || search_disabled? %>
            <li>
              <form action="<%= relative_search_path %>" class="site-search" id="site-search" method="get">
                <div class="search-input gsc-input">
                  <%= header_search_input %>
                  <%= tag 'button', type: 'submit', value: 'Submit search', class: 'search-submit' %>
                </div>
              </form>
            </li>
          <% end %>

          <% if logged_in? %>
            <li>
              <div class="glostick__user">
                <div class="has-dropdown glostick__menu-icon">
                  <div class="icon icon-navigator-toggle"></div>
                  <div class="dropdown glostick__menu--navigator">
                    <a class="glostick__menu__item glostick__menu__item--dashboard" href="https://dashboard.heroku.com">Dashboard</a>
                    <a class="glostick__menu__item glostick__menu__item--databases" href="https://data.heroku.com">Databases</a>
                    <a class="glostick__menu__item glostick__menu__item--dataclips" href="https://dataclips.heroku.com">Dataclips</a>
                    <a class="glostick__menu__item glostick__menu__item--elements" href="<%= Bookends::Config.host_elements %>">Marketplace</a>
                    <a class="glostick__menu__item glostick__menu__item--docs" href="<%= Bookends::Config.host_dev_center %>">Documentation</a>
                    <a class="glostick__menu__item glostick__menu__item--support" href="https://help.heroku.com">Support</a>
                  </div>
                </div>


                <div class="has-dropdown glostick__menu-icon glostick__menu-icon--account">
                  <img class="glostick__user__avatar js-glostick-avatar" src="">
                  <a class="mobile-dashboard-link" href="https://dashboard.heroku.com/" title="<%= glostick_user_name %>, <%= glostick_user_email %>"><img class="glostick__user__avatar js-glostick-avatar" src=""></a>
                  <div class="dropdown glostick__menu--account">
                    <a class="glostick__menu__item glostick__menu__item--account-details">
                      <img class="glostick__account-details__avatar js-glostick-avatar" src="">
                      <div class="glostick__account-details__name">
                        <%= glostick_user_name %>
                      </div>
                      <div class="glostick__account-details__email">
                        <%= glostick_user_email %>
                      </div>
                    </a>
                    <a class="glostick__menu__item glostick__menu__item--settings" href="https://dashboard.heroku.com/account">Account settings</a>
                    <a class="glostick__menu__item glostick__menu__item--signout" href="<%= Bookends::Config.logout_path %>">Sign out</a>
                  </div>
                </div>

              </div>
            </li>
          <% else %>
            <li class="user">
              <%= link_to "Log in", Bookends::Config.login_path %>
              <span>or</span>
              <%= signup_link "Sign up", ga_label: "www-header", class: "sign-up highlight" %>
            </li>
          <% end %>
        </ul>
      </div>

    </div>
  </nav>

  <% if content_for?(:marketing_header_copy) %>
    <%= yield(:marketing_header_copy) %>
  <% end %>

  <% if content_for?(:hero) %>
    <section id="hero" class="<%= hero_class %>">
      <%= yield(:hero) %>
    </section>
  <% end %>
</header>