<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-animate.min.js"></script>
<link rel="stylesheet" type="text/css" href="raml-designer-4-git.css">
<script src="querry-parameters.js"></script>
<script src="raml-designer-4-git.js"></script>
</head>
<body>
<div id="layout" ng-app="headerApp" ng-controller="headerController">
    <div id="header" class="animate-show" ng-show="gitHeader">
        <div style="vertical-align: middle; display: inline-block"><b>Content from: </b></div>
        <div style="height:100%; vertical-align: middle; display: inline-block"><img ng-src={{gitHubAvatar}} style="height:100%"/></div>
        <div style="vertical-align: middle; display: inline-block">
            <a style='color:inherit' ng-href={{gitHubOwnerHtmlURL}}>{{gitHubOwnerLogin}}</a> <i>({{gitHubOwnerType}})</i> <b> Path: </b> <a style='color:inherit' ng-href={{gitHubHtmlUrl}}>{{gitHubRepoName}}</a>/{{gitHubRepoPath}}
        </div>
        <div style="vertical-align: middle; display: inline-block">
            <form name="myForm">
                <label for="mySelect"><b>Ref:</b></label>
                <select name="mySelect" id="mySelect" 
                    ng-options="option.name disable when option.disabled for option in refs.availableOptions track by option.id"
                    ng-model="refs.selectedOption" ng-change="refs.changed()"></select>
            </form>
        </div>
    </div>
    <div id="content-wrapper">
        <iframe id="content" ng-src="{{ramlLocation}}"></iframe>
    </div>
</div>
</body>
</html>