{% extends "templates/index.html" %}

{% block header %}
<div id="header" class="text-center">
<h3>Run Jupyter Notebooks and experiment directly on the BioImageArchive</h3>
<div id="explanation">
  This is an installation of BinderHub in EMBL-EBI for the BioImageArchive
</div>

</div>


  <div id="header" class="form-row row">
    <div class="form-group col-md-2 col-md-4 col-md-offset-4">
        <div class="btn-group" id="launch-buttons">
        <a href="https://bia-binder.readthedocs.io/">
            <button id="submit" class="btn-submit" type="submit">readme</button>
        </a>
        </div>
      </div>

    <div class="form-group col-md-2">
      <div class="btn-group" id="launch-buttons">
        <a href="https://login.binder.bioimagearchive.org/">
            <button id="submit"   class="btn-submit" type="submit">login</button>
        </a>
      </div>
    </div>
  </div>

{% endblock header %}

{% block how_it_works %}

<div id="how-it-works">
  <h3 class="text-center">How it works</h3>

  <div class="row">
    <div class="col-md-1 col-md-offset-2 point-container">
      <span class="point point-orange">1</span>
    </div>
    <div class="col-md-7 front">
      <span class="front-em">Enter your repository information</span><br />Provide in the above form a URL or a GitHub repository that contains Jupyter notebooks, as well as a branch, tag, or commit hash. Launch will build your Binder repository. If you specify a path to a notebook file, the notebook will be opened in your browser after building.
    </div>
  </div>

  <div class="row">
    <div class="col-md-1 col-md-offset-2 point-container">
      <span class="point point-red">2</span>
    </div>
    <div class="col-md-7 front">
      <span class="front-em">We build a Docker image of your repository</span><br />Binder will search for a dependency file, such as requirements.txt or environment.yml, in the repository's root directory (<a href="http://mybinder.readthedocs.io/en/latest/using.html#preparing-a-repository-for-binder">more details on more complex dependencies in documentation</a>). The dependency files will be used to build a Docker image. If an image has already been built for the given repository, it will not be rebuilt. If a new commit has been made, the image will automatically be rebuilt.
    </div>
  </div>

  <div class="row">
    <div class="col-md-1 col-md-offset-2 point-container">
      <span class="point point-blue">3</span>
    </div>
    <div class="col-md-7 front">
      <span class="front-em">Interact with your notebooks in a live environment!</span><br />A <a href="https://jupyterhub.readthedocs.io/en/latest/">JupyterHub</a> server will host your repository's contents. We offer you a reusable link and badge to your live repository that you can easily share with others.
    </div>
  </div>
</div>

</div>

  {% endblock how_it_works %}