<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>OpenID Connect</title>
    <meta name="description" content="">
    <meta name="author" content="">

    <!-- Le javascript -->
    <script src="http://code.jquery.com/jquery-1.7.min.js"></script>
    <script src="../bootstrap/js/bootstrap-modal.js"></script>
    <script src="../bootstrap/js/bootstrap-alerts.js"></script>
    <script src="../bootstrap/js/bootstrap-twipsy.js"></script>
    <script src="../bootstrap/js/bootstrap-popover.js"></script>
    <script src="../bootstrap/js/bootstrap-dropdown.js"></script>
    <script src="../bootstrap/js/bootstrap-scrollspy.js"></script>
    <script src="../bootstrap/js/bootstrap-tabs.js"></script>
    <script src="../bootstrap/js/bootstrap-buttons.js"></script>
    <script src="../js/tmpl.js"></script>

    <script>$(function () {

        var ExampleOpenIdClient = {
            name:"A name",
            redirectURL:"http://myURL.domain",
            grantType:["my grant type 1", "my grant type 2"],
            scope:["scope 1", "scope 2"],
            authority:"my authority",
            description:"my description",
            refreshTokens:false
        };

        console.log(tmpl('client_tmpl', ExampleOpenIdClient));

        $('#client-table').append(tmpl('client_tmpl', ExampleOpenIdClient));

    })</script>

    <!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
    <!--[if lt IE 9]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

    <!-- Le styles -->
    <link href="../bootstrap/bootstrap.css" rel="stylesheet">
    <style type="text/css">
        body {
            padding-top: 60px;
        }

        h1,label {
            text-shadow: 1px 1px 1px #FFFFFF;
        }

        .logo {
            background: url("../images/openid_small.png") no-repeat left center;
            padding-left: 30px;
        }
    </style>

    <!-- Le fav and touch icons -->
    <link rel="shortcut icon" href="images/favicon.ico">
    <link rel="apple-touch-icon" href="images/apple-touch-icon.png">
    <link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png">
    <link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png">
</head>

<body>


<div class="topbar">
    <div class="topbar-inner">
        <div class="container-fluid">
            <a class="brand" href="#"><span class="logo">OpenID Connect Server</span></a>
            <ul class="nav">
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#about">About</a></li>
                <li><a href="#about">Statistics</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
            <p class="pull-right">Logged in as <a href="#">username</a></p>
        </div>
    </div>
</div>

<div class="container-fluid">
    <div class="sidebar">
        <div class="well">
            <h5>Administrative</h5>
            <ul>
                <li><a href="#">Manage Clients</a></li>
                <li><a href="#">White Lists</a></li>
                <li><a href="#">Black Lists</a></li>
            </ul>
            <h5>Personal</h5>
            <ul>
                <li><a href="#">Manage Sites</a></li>
                <li><a href="#">Manage Active Tokens</a></li>
                <li><a href="#">Profile</a></li>
            </ul>
        </div>
    </div>
    <div class="content">
        <div class="">
            <ul class="breadcrumb">
                <li><a href="#">Home</a> <span class="divider">/</span></li>
                <li class="active"><a href="#">Manage Clients</a><span class="divider">/</span></li>
                Edit Client
            </ul>


            <h1>Edit Client</h1>

            <div id="edit-client-form">
                <div>

                    <form>
                        <fieldset>
                            <legend>OpenID Client</legend>
                        </fieldset>
                        <div class="clearfix">
                            <label for="xlInput">Client Name</label>

                            <div class="input">
                                <input type="text" size="30" name="xlInput" id="xlInput" class="xlarge">
                            </div>
                        </div>

                        <div class="clearfix">
                            <label for="prependedInput">Redirect Url</label>

                            <div class="input">
                                <div class="input-prepend">
                                    <span class="add-on">http://</span>
                                    <input type="text" size="16" name="prependedInput" id="prependedInput"
                                           class="medium">
                                </div>
                                <span class="help-block">Url to be redirected</span>
                            </div>
                        </div>

                        <div class="clearfix">
                            <label id="optionsCheckboxes">Grant Types:</label>

                            <div class="input">
                                <ul class="inputs-list">
                                    <li>
                                        <label>
                                            <input type="checkbox" value="option1" name="optionsCheckboxes">
                                            <span>Grant Type Blah</span>
                                        </label>
                                    </li>
                                    <li>
                                        <label>
                                            <input type="checkbox" value="option2" name="optionsCheckboxes">
                                            <span>Grant Type Blah</span>
                                        </label>
                                    </li>
                                    <li>
                                        <label>
                                            <input type="checkbox" value="option2" name="optionsCheckboxes">
                                            <span>Grant Type Blah</span>
                                        </label>
                                    </li>
                                </ul>
              <span class="help-block">
                <strong>Note:</strong> Grant type help text.
              </span>
                            </div>
                        </div>

                        <div class="clearfix">
                            <label for="textarea2">Scope</label>

                            <div class="input">
                                <textarea rows="3" name="textarea2" id="textarea2" class="xlarge">email,first
                                    name</textarea>
              <span class="help-block">
                Please enter scopes separated by commas
              </span>
                            </div>
                        </div>

                        <div class="clearfix">
                            <label id="authorities">Authorities:</label>

                            <div class="input">
                                <ul class="inputs-list">
                                    <li>
                                        <label>
                                            <input type="checkbox" name="optionsCheckboxes" value="option1">
                                            <span>Authority Type Blah</span>
                                        </label>
                                    </li>
                                    <li>
                                        <label>
                                            <input type="checkbox" name="optionsCheckboxes" value="option2">
                                            <span>Authority Type Blah</span>
                                        </label>
                                    </li>
                                    <li>
                                        <label>
                                            <input type="checkbox" name="optionsCheckboxes" value="option2">
                                            <span>Authority Type Blah</span>
                                        </label>
                                    </li>
                                </ul>
              <span class="help-block">
                <strong>Note:</strong> Authority type help text.
              </span>
                            </div>
                        </div>

                        <div class="clearfix">
                            <label for="appendedInput">Access Token Timeout</label>

                            <div class="input">
                                <div class="input-append">
                                    <input type="text" size="16" name="appendedInput" id="appendedInput" class="mini">
                                    <label class="add-on">seconds</label>
                                </div>
                            </div>
                        </div>

                        <div class="clearfix">
                            <label for="form-description">Description</label>

                            <div class="input">
                                <input type="text" size="30" name="form-description" id="form-description"
                                       class="xlarge">
                            </div>
                        </div>

                        <div class="clearfix">
                            <label id="form-allow-tokens">Allow refresh tokens?</label>

                            <div class="input">
                                <ul class="inputs-list">
                                    <li>
                                        <label>
                                            <input type="checkbox" value="option1" name="form-allow-tokens">
                                            <span>&nbsp;</span>
                                        </label>
                                    </li>
                                </ul>
              <span class="help-block">
                <strong>Note:</strong> Labels surround all the options for much larger click areas and a more usable form.
              </span>
                            </div>
                        </div>

                        <div class="clearfix">
                            <label for="appendedInput">Refresh Token Timeout</label>

                            <div class="input">
                                <div class="input-append">
                                    <input type="text" size="16" name="appendedInput" id="refresh-token-timout"
                                           class="mini">
                                    <label class="add-on">seconds</label>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <a href="#" class="btn primary">Save</a>
                    <a href="#" class="btn secondary">Cancel</a>
                </div>
            </div>


        </div>


        <footer>
            <p>&copy; Company 2012</p>
        </footer>
    </div>
</div>

</body>
</html>