{% extends "standalone.html" %}
{% block title %}Escher{% endblock %}
{% block head %}
  <script src="{{d3}}"></script>

  <link rel="stylesheet" href="{{boot_css}}"/>
  <link rel="stylesheet" href="{{index_css}}"/>

  <link rel="shortcut icon" href="{{favicon}}" />
  
  <!-- This font cannot be downloaded. -->
  <script src="//use.edgefonts.net/tulpen-one.js"></script>
{% endblock %}
{% block content %}
  <main>
    <div class="container">
      <header class="row">
        <div class="col-sm-12">
          <img src="{{logo}}" id="logo">
          <div id="title-box">
            <h1 id="title">ESCHER</h1>
            <p>Build, share, and embed visualizations of biological pathways.</p>
          </div>
        </div>
      </header>
      <div class="row">  
        <div class="col-sm-12">
          <h3>Filter by organism</h3>
          <select id="organisms" class="form-control">
            <option value="all">All</option>
          </select>
        </div>
      </div>
      <div class="row">
        <div class="col-sm-5">
          <h3>Map</h3>
          <select id="maps" class="form-control">
            <option value="none">None</option>
          </select>
        </div>
        <div class="col-sm-4">
          <h3>Model (Optional)</h3>
          <select id="models" class="form-control">
            <option value="none">None</option>
          </select>
        </div>
        <div class="col-sm-3">
          <h3>Tool</h3>
          <select id="tools" class="form-control">
            <option class="tool" value="builder">Builder</option>
            <option class="tool" value="viewer">Viewer</option>
            {% if not web_version and can_dev %}
              <option class="tool" value="dev_builder">Builder (Dev)</option>
              <option class="tool" value="dev_viewer">Viewer (Dev)</option>
            {% endif %}
          </select>
        </div>
      </div>
      <div class="row">
        <div class="col-sm-6">
          <h3>Options</h3>
          <div style="width: 100%">
            <label>
              <input type="checkbox" id="scroll"> Scroll to zoom (instead of scroll to pan)
            </label>
          </div>
          <div style="width: 100%">
            <label>
              <input type="checkbox" id="never_ask"> Never ask before reloading
            </label>
          </div>
        </div>
        <div class="col-sm-6">
          <button type="button" id="submit" class="btn btn-default column-button">
            Load map
          </button>
        </div>
      </div>

      <hr/>

      {% if web_version %}
        <!-- Demos -->
        <div id="demos" class="row">
          <div class="col-sm-2">
            <h2>Demos</h2>
          </div>  
          <div class="col-sm-5">
            <div>
              <a href="/escher-demo/knockout">
                <span class="demo-title">Knockout</span>
                <img class="img-responsive demo-img" src="/escher/resources/knockout-demo-screenshot.png" />
              </a>
            </div>
          </div>
          <div class="col-sm-5">
            <div>
              <a href="/escher-demo/structures">
                <span class="demo-title">Structures</span>
                <img class="img-responsive demo-img" src="/escher/resources/structures-demo-screenshot.png" />
              </a>
            </div>
          </div>
        </div>

        <hr/>

        
        <!-- EscherConverter -->
        <div id="escherconverter" class="row">
          <div class="col-sm-5">
            <h2>EscherConverter</h2>
          </div>  
          <div class="col-sm-7">
            <div>
              <p>EscherConverter is a standalone program that reads files
                created with Escher and converts them to files in community
                standard formats.</p>
              <p><a href="https://escher.readthedocs.org/en/latest/escherconverter.html">Learn more and download.</a></p>
            </div>
          </div>
        </div>

        <hr/>

      {% endif %}  

      <!-- FAQ  -->
      <div id="faq" class="row">
        <div class="col-sm-12">
          <h2>FAQ</h2>
          <ol>
            <li><h4>What is Escher?</h4>
              <p>Escher is a web-based tool for building, viewing, and sharing
                visualizations of biological pathways. These 'pathway maps' are a
                great way to contextualize data about metabolism. To get started,
                load a map by clicking the <b>Load Map</b> button above, or visit
                the <a href="{{documentation}}">documentation</a> to learn more.
              </p>
            </li>
            <li><h4>How do I cite Escher?</h4>
              <p>Please support this project by citing Escher if you find it
                useful for a project. You can use the following citation:</p>
              <p>Zachary A. King, Andreas Dräger, Ali Ebrahim, Nikolaus
                Sonnenschein, Nathan E. Lewis, and Bernhard O. Palsson
                (2015) <i>Escher: A web application for building, sharing, and
                embedding data-rich visualizations of biological pathways</i>,
                PLOS Computational Biology. Accepted for publication.</p>
              <li><h4>Are there more maps available? Can I contribute maps?</h4>
                <p>We will be uploading maps for all of the organisms in the 
                  <a href="http://bigg.ucsd.edu/">BiGG</a> database. If you
                  would like to contribute maps, there is a
                  <a href="https://escher.readthedocs.org/en/latest/contribute_maps.html">guide</a>
                  available in the documentation.
              </li>
              <li><h4>How is Escher licensed?</h4>
                <p>Escher and EscherConverter are distributed under the 
                  <a href="https://github.com/zakandrewking/escher/blob/master/LICENSE">MIT license</a>.</p>
                <li><h4>What browsers can I use?</h4>
                  <p>We recommend using Google Chrome for optimal performance, but
                    Escher will also run in the latest versions of Firefox, Internet
                    Explorer, and Safari (including mobile Safari).</p>
                </li>
                <li><h4>I have more questions. Who do I ask?</h4>
                  <p>Visit the <a href="{{documentation}}">documentation</a>
                    to get started with Escher and explore the API. You can follow
                    <a href="https://twitter.com/zakandrewking">@zakandrewking</a>
                    for Escher updates. If you find bugs or would like to contribute
                    to the project, feel free to submit an issue and or a pull request
                    on <a href="{{github}}">Github</a>.</p> 
                </li>
          </ol>
        </div>
        
      </div>
    </div>
    <div id="push"></div>
  </main>
  <footer>
    <div class="container">
      <p class="more">
        <a href="{{documentation}}">Documentation</a> – <a href="{{github}}">GitHub</a>
      </p>
      <p class="version">
        Version {{version}}
      </p>
    </div>
  </footer>

  <script src="{{index_js}}"></script>
  <script>
   {% if web_version %} 
   // get the models
   d3.json('{{server_index_url}}', function(d) {
       var server_index = d, local_index = null;
       setup(server_index, local_index, '{{map_download}}', false);
   });
   {% else %}
   setup({{server_index}}, {{local_index}}, '{{map_download}}', {{can_dev_js}});
   {% endif %}   
  </script>
{% endblock %}
