@(distanceCalc: Form[Application.DistanceCalc], geocode: Form[Application.Geocode], postcodeUnits: List[models.PostcodeUnit])

@implicitField = @{helper.FieldConstructor(twitterBootstrap20FieldConstructor.f)}

@main("Welcome to CamelCode") {
<div class="jumbotron">
    <div class="container">
        <h1>CamelCode</h1>

        <p class="lead">
            A tech demo built using <a href="http://www.playframework.org/">Play Framework</a> that
            imports the <a href="https://www.ordnancesurvey.co.uk/opendatadownload/products.html">CodePoint Open</a> UK
            postcode dataset and offers a Geocoding REST API.
        </p>
    </div>
</div>

<div class="container">
    <div class="row">
        <div class="span4">
            <h3><i class="icon-bullseye"></i> Geocode</h3>
            <p>
                Geocoding UK postcodes has never been so easy! The 1.7 million
                <a href="https://www.ordnancesurvey.co.uk/opendatadownload/products.html">CodePoint Open</a> postcodes
                are imported in under one minute, and average response time is below 10ms on modern hardware. Try these:
                <a href="@routes.Application.latLng("BS106TF")">BS10 6TF</a>,
                <a href="@routes.Application.latLng("SW1A 2AA")">SW1A 2AA</a>.
            </p>
        </div>
        <div class="span4">
            <h3><i class="icon-map-marker"></i> Postcode map</h3>
            <p>
                Visit the <a href="@routes.Application.map()">postcode map</a>. Click anywhere to display postcodes.
                CTRL-Double click for distances.
            </p>
        </div>
        <div class="span4">
            <h3><i class="icon-heart"></i> Shoulders</h3>
            <p>
                Built standing on the shoulders of
                <a href="http://www.playframework.org/" target="_blank">Play Framework 2.2 <i class="icon-external-link"></i></a>,
                <a href="http://camel.apache.org/" target="_blank">Apache Camel <i class="icon-external-link"></i></a>,
                <a href="http://www.geotools.org/" target="_blank">GeoTools <i class="icon-external-link"></i></a>,
                <a href="http://www.mongodb.org/" target="_blank">MongoDB <i class="icon-external-link"></i></a>,
                <a href="http://code.google.com/p/morphia/" target="_blank">Morphia <i class="icon-external-link"></i></a>,
                <a href="http://code.google.com/p/google-guice/" target="_blank">Google Guice <i class="icon-external-link"></i></a>,
                <a href="http://twitter.github.com/bootstrap/" target="_blank">Twitter Bootstrap <i class="icon-external-link"></i></a> and
                <a href="http://fortawesome.github.com/Font-Awesome/" target="_blank">Font Awesome <i class="icon-external-link"></i></a>.
            </p>
        </div>
    </div>
    <div class="row">
        <div class="span4">
            <h3><i class="icon-beer"></i> Completely free</h3>
            <p>
                The CamelCode project is free for commercial use.
                Follow <a href="http://twitter.com/analytically" target="_blank"><i class="icon-twitter-sign"></i>@@analytically</a>
                for updates and programming tips and tricks. Development sponsored by <a href="http://www.coen.co.uk">Coen Recruitment</a>.
            </p>
        </div>
        <div class="span4 tabbable tabs-left">
            <ul id="tab" class="nav nav-tabs">
                <li class="active"><a href="#distance" data-toggle="tab">Distance</a></li>
                <li><a href="#ll" data-toggle="tab">Lat/Long</a></li>
                <li><a href="#en" data-toggle="tab">X/Y</a></li>
            </ul>

            <div class="tab-content">
                <div class="tab-pane active" id="distance">
                    @helper.form(routes.Application.calc()) {
                    <fieldset>
                        @helper.input(distanceCalc("postcode"), '_label -> "Postcode:") { (id, name, value, args) =>
                        <input type="text" class="input-small" id="@id" name="@name" value="@value" @toHtmlArgs(args)>
                        }

                        @helper.input(distanceCalc("distance"), '_label -> "Within (miles):") { (id, name, value, args) =>
                        <input type="text" class="input-small" id="@id" name="@name" value="@value" @toHtmlArgs(args)>
                        }

                        <button type="submit" class="btn btn-primary">Show postcodes</button>
                    </fieldset>
                    }
                </div>
                <div class="tab-pane" id="ll">
                    @helper.form(routes.Application.ll) {
                    <fieldset>
                        @helper.input(geocode("postcode"), '_label -> "Postcode:") { (id, name, value, args) =>
                        <input type="text" class="input-small" id="@id" name="@name" value="@value" @toHtmlArgs(args)>
                        }

                        <button type="submit" class="btn btn-primary">Geocode</button>
                    </fieldset>
                    }
                </div>
                <div class="tab-pane" id="en">
                    @helper.form(routes.Application.en) {
                    <fieldset>
                        @helper.input(geocode("postcode"), '_label -> "Postcode:") { (id, name, value, args) =>
                        <input type="text" class="input-small" id="@id" name="@name" value="@value" @toHtmlArgs(args)>
                        }

                        <button type="submit" class="btn btn-primary">Geocode</button>
                    </fieldset>
                    }
                </div>
            </div>
        </div>
        <div class="span4">
            <h3><i class="icon-bar-chart"></i> Metrics</h3>

            Check the server
            <a href="@routes.Server.metrics()"><i class="icon-cogs"></i> metrics</a> and
            <a href="@routes.Server.health()"><i class="icon-medkit"></i> health</a>.
        </div>
    </div>

    <hr/>

    @if(flash.containsKey("success")) {
    <div class="alert alert-success">
        <strong>Done!</strong> @flash.get("success")
    </div>
    }

    @if(postcodeUnits.size > 0) {
    <div class="well">
        <ul>
            @for(unit <- postcodeUnits) {
                <li>@unit.postcode - @unit.location.latitude, @unit.location.longitude</li>
            }
        </ul>
    </div>
    }

    Coded by <a href="//twitter.com/analytically">@@analytically</a>.
</div>
}