<html lang="en">

<head>

    <!-- set initial view -->
    <meta content="width=device-width, initial-scale=1.0" name="viewport">

    <!-- add jquery -->
    <script src="{{dot_dot_str}}static/js/jquery/1.10.2/jquery-1.10.2.min.js" type="text/javascript"></script>

    <!-- add mousewheel scrolling -->
    <script type="text/javascript" src="{{dot_dot_str}}static/js/jquery/1.10.2/jquery.mousewheel-3.0.6.pack.js"></script>

    <!-- add bootstrap -->
    <link media="all" href="{{dot_dot_str}}static/css/bootstrap/3.3.2/bootstrap.min.css" type="text/css" rel="stylesheet">
    <script src="{{dot_dot_str}}static/js/bootstrap/3.3.2/bootstrap.min.js" type="text/javascript"></script>

    <!-- add fancybox -->
    <script type="text/javascript" src="{{dot_dot_str}}static/js/fancybox/2.1.5/jquery.fancybox.js"></script>
    <link rel="stylesheet" type="text/css" href="{{dot_dot_str}}static/css/fancybox/2.1.5/jquery.fancybox.css" media="screen" />

    <!-- add mathjax -->
    <script type="text/x-mathjax-config">
        MathJax.Hub.Config({tex2jax: {inlineMath: [['$','$']]}});
    </script>
    <script type="text/javascript" src="//cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
    </script>

    <!-- add orange stylization -->
    <script type="text/javascript" src="{{dot_dot_str}}static/js/fancybox/2.1.5/fancybox-orange.js"></script> 
    <link media="all" href="{{dot_dot_str}}static/css/pycbc/orange.css" type="text/css" rel="stylesheet">

    <!-- add popover js -->
    <script> $(function () {$('[data-toggle="popover"]').popover()})</script>
    <style type="text/css">
        .popover{
            max-width:600px;
        }
    </style>

    <!-- add expand all js -->
    <script>
        $(function () {

            var active = true;

            $('#collapse-init').click(function () {
                if (active) {
                    active = false;
                    $('.panel-collapse').collapse('show');
                    $('.panel-title').attr('data-toggle', '');
                    $(this).text('Collapse All');
                } else {
                    active = true;
                    $('.panel-collapse').collapse('hide');
                    $('.panel-title').attr('data-toggle', 'collapse');
                    $(this).text('Expand All');
                }
            });
    
            $('#accordion').on('show.bs.collapse', function () {
                if (active) $('#accordion .in').collapse('hide');
            });

        });
    </script>

    <!-- title -->
    <title>{{analysis_title}}</title>

    <!-- add fonts -->
    <style>
    @font-face {
        font-family : 'Lato';
        src : url('{{dot_dot_str}}static/fonts/Lato-Light.eot');
        src : url('{{dot_dot_str}}static/fonts/Lato-Light.eot') format('embedded-opentype'),url('{{dot_dot_str}}static/fonts/Lato-Light.woff') format('woff'),url('{{dot_dot_str}}static/fonts/Lato-Light.ttf') format('truetype');
        text-rendering : optimizeLegibility;
    }
    @font-face{
        font-family : 'Lato';
        src : url('{{dot_dot_str}}static/fonts/Lato-Semibold.eot');
        src : url('{{dot_dot_str}}static/fonts/Lato-Semibold.eot') format('embedded-opentype'),url('{{dot_dot_str}}static/fonts/Lato-Semibold.woff') format('woff'),url('{{dot_dot_str}}static/fonts/Lato-Semibold.ttf') format('truetype');
        font-weight : bold;
       text-rendering : optimizeLegibility;
    }
    </style>

</head>

<body>

<div id="wrap">

<!-- set dir0 counter integer -->
{% set i = 1 %}

<!-- navbar -->
<div class="navbar navbar-custom navbar-static-top">
  <div class="container-fluid">

        <!-- title and subtitle -->
        <div class="row" style="padding-top:10px">
            <div class="col-md-4">
                <p class="text-left">
                    <img src={{logo}} alt="PyCBC logo" style="height:3em;">
                </p>
            </div>
            <div class="col-md-4">
                <p class="text-center" style="font-size:150%;"><b>{{analysis_title}}</b></p>
                <p class="text-center">{{analysis_subtitle}}</p>
            </div>
            <div class="col-md-4"></div>
        </div>

    <!-- button for collapsed navbar -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>

    <!-- buttons on navbar -->
    <div class="collapse navbar-collapse">
      <ul class="nav navbar-nav">

        <!-- always have a button to the top-level directory -->
        <li class="active"><a href="{{dot_dot_str}}">Summary</a></li>

        <!-- display top-level directories -->
        {% for dir0 in dirs_0 %}
        <li class="dropdown ">
            <a href="#" id="drop1" data-toggle="dropdown" class="dropdown-toggle" role="button">{{dir0.title()}}<b class="caret"></b></a>
            <ul role="menu" class="dropdown-menu" aria-labelledby="drop1">
                <li role="presentation"><a href="{{dot_dot_str}}{{dir0.name()}}" role="menuitem">Summary</a></li>
                <li class="divider"></li>

                <!-- set subsection counter integer -->
                {% for subdir in dir0.subdirs %}
                    <li role="presentation"><a href="{{dot_dot_str}}.{{subdir.path}}" role="menuitem">{{subdir.title()}}</a></li>
                {% endfor %}

            </ul>
        </li>
        {% endfor %}

      </ul>
    </div>
  </div>
</div>

    <div id="main">
        <div class="container">
            <div id="content">

                <!-- page name -->
                <div class="row">
                    <div class="col-md-12">
                        <h1>{{dir.title()}}</h1>
                     </div>
                </div>

                <!-- set list of files which are handled in wells -->
                {% set well_filenames = []%}
                
                {% set wellnames = [] %}
                {% for wellname in dir.files %}
                    {% if wellname.filename().find('well') == 0 %}
                        {% set _ = wellnames.append(wellname) %}
                    {% endif %}
                {% endfor %}
                
                <!-- include well if it exists and check meta-data if well renders any files inside it -->
                {% for wellname in wellnames %}
                    {% set well_path = plots_dir + dir.path + '/' + wellname.filename() %}
                    {% set _ = well_filenames.append(wellname.filename()) %}
                    {% if path_exists(well_path) %}
                    
                        {% set cp = get_embedded_config(well_path) %}
                        
                        {% if cp.check_option(wellname.filename(), 'filenames') %}
                            {% set _ = well_filenames.extend(get_embedded_config(well_path).get(wellname.filename(), 'filenames').split(',')) %}
                        {% endif %}
                        
                        {% if not cp.check_option(wellname.filename(), 'collapse') %}
                            {{ setup_template_render(well_path, None) }}     
                        {% else %}
                            <div class="panel-group" id="accordion1">
                                <div class="panel panel-default">
                                    <div class="panel-heading">
                                        <h4 class="panel-title" data-toggle="collapse" data-target="#collapse{{loop.index}}well">
                                            {% if cp.check_option(wellname.filename(), 'title') %}
                                                W{{loop.index}}. {{cp.get(wellname.filename(), 'title')}}
                                            {% else %}
                                                W{{loop.index}}. {{wellname.filename()}}
                                            {% endif %}
                                        </h4>
                                    </div>
                                    <div id="collapse{{loop.index}}well" class="panel-collapse collapse">
                                        <div class="panel-body">
                                            {{setup_template_render(well_path, None) }}     
                                        </div>
                                    </div>
                                </div>
                            </div>
                        {% endif %}                               
                    {% endif %}
                {% endfor %}

                <hr class="row-divider">

                <!-- display other files in directory -->
                {% if dir.files %}
                <div class="row">
                    <div class="col-md-12">

                        <!-- loop over files in directory -->
                        <h1>Additional Files</h1>
                            The following files were also found in this directory:
                            <div class="row" style="padding:15px">
                                <button id="collapse-init" class="btn btn-xs btn-primary">Expand All</button>
                            </div>
                            {% set count = [1] %}
                            {% for file in dir.files %}
                                {% if path_exists(file.path) %}

                                    <!-- get config file -->
                                    {% set cp = get_embedded_config(file.path) %}
                                    <!-- do not show well.html -->
                                    {% if not file.filename() in well_filenames %}
                                        <div class="panel-group" id="accordion">
                                            <div class="panel panel-default">
                                                <div class="panel-heading">
                                                    <h4 class="panel-title" data-toggle="collapse" data-target="#collapseorange{{loop.index}}">
                                                        {% if cp.check_option(file.filename(), 'title') %}
                                                            B{{count|length}}. {{cp.get(file.filename(), 'title')}}
                                                        {% else %}
                                                            B{{count|length}}. {{file.filename()}}
                                                        {% endif %}
                                                    </h4>
                                                </div>
                                                <div id="collapseorange{{loop.index}}" class="panel-collapse collapse">
                                                    <div class="panel-body">
                                                        {{file.render()}}
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    {% set _ = count.append(1) %}
                                    {% endif %}
                                {% endif %}
                            {% endfor %}
                    </div>
                </div>
                {% endif %}

            </div>
         </div>
     </div>
</div>

<footer>
    <div class="container-fluid">
        <div class="footer-custom">
            <a href="{{dot_dot_str}}sitemap/index.html">Sitemap</a>
        </div>
    </div>
</footer>

</body>
</html>
