<div class="js-SearchBar">
    <nav class="navigation nav js-navigation">
        <div class="nav-container">
           {%- if request.url_rule.endpoint == 'create_issue' %}
            <ul class="nav-left">
                <li class="nav-item">
                    <a class="nav-link js-Navbar-link" href="/" title="Navigate to main page.">
                        <svg class="icon nav-icon" viewBox="0 0 30 30" role="presentation" aria-hidden="true">
                            <use xlink:href="#svg-home" />
                        </svg>
                        <span class="link-text">Home</span>
                    </a>
                </li>
            </ul>
            {%- else %}
                {% include "nav/addon-links.html" %}
            {%- endif %}

            <ul class="nav-right">
                <li class="nav-item">
                    <button class="nav-button nav-link js-SearchBarOpen" title="Search for an item.">
                        <svg class="icon nav-icon" viewBox="0 0 30 30" role="presentation" aria-hidden="true">
                            <use xlink:href="#svg-search2" />
                        </svg>
                        <span class="link-text">Search</span>
                    </button>
                </li>
                {% include "nav/shared-nav-links.html" %}
            </ul>
        </div>
    </nav>

    <form id="search-bar" class="grid" method="get" action="/issues">
        <input class="form-field text-field" name="q" placeholder="Search issues by keyword" required />
        <button class="nav-button js-SearchBarClose" type="button" aria-label="Close search">
          <svg class="icon nav-icon" viewBox="0 0 30 30" role="presentation" aria-hidden="true">
            <use xlink:href="#svg-x" />
        </svg>
        </button>
    </form>
</div>
