<script type="text/javascript" src="${pluginRoot}/res/ui/obr.js"></script>
<script type="text/javascript">
var i18n = {
	status_ok : '${obr.status.ok}',
	status_no : '${obr.status.no}',
	selectVersion : '${obr.version.select}'
}
var obrData = ${__data__};
</script>

<p class="statline">${obr.status.ok}</p>

<div id="ifStatusOK" class="ui-helper-hidden">

<div class="ui-widget-header ui-corner-top buttonGroup">
	<span style="float: left; margin-left: 1em">${obr.repo.title}</span>
	<input style="width: 50%" type="text" id="addRepoUri" />
	<button id="addRepoBtn">${obr.action.add}</button>
</div>

<table id="repoTable" class="nicetable">
	<thead>
		<tr>
			<th class="col_Name">${obr.repo.name}</th>
			<th class="col_URL">${obr.repo.url}</th>
			<th class="col_lastMod">${obr.repo.lastModified}</th>
			<th class="col_Actions">${obr.repo.actions}</th>
		</tr>
	</thead>
	<tbody> <!-- template: will be replaced dynamically by JS -->
		<tr>
			<td>name</td>
			<td>url</td>
			<td>date</td>
			<td>
				<ul class="icons ui-widget">
					<li class="dynhover" title="${refresh}"><span class="ui-icon ui-icon-refresh">&nbsp;</span></li>
					<li class="dynhover" title="${delete}"><span class="ui-icon ui-icon-trash">&nbsp;</span></li>
				</ul>
			</td>
		</tr>
	</tbody>
</table>

<br/>

<div class="ui-widget-header ui-corner-top buttonGroup">
    <span style="float: left; margin-left: 1em">${obr.res.title}</span>
    <span>
        <a href="${pluginRoot}?list=a">A</a>
        <a href="${pluginRoot}?list=b">B</a>
        <a href="${pluginRoot}?list=c">C</a>
        <a href="${pluginRoot}?list=d">D</a>
        <a href="${pluginRoot}?list=e">E</a>
        <a href="${pluginRoot}?list=f">F</a>
        <a href="${pluginRoot}?list=g">G</a>
        <a href="${pluginRoot}?list=h">H</a>
        <a href="${pluginRoot}?list=i">I</a>
        <a href="${pluginRoot}?list=j">J</a>
        <a href="${pluginRoot}?list=k">K</a>
        <a href="${pluginRoot}?list=l">L</a>
        <a href="${pluginRoot}?list=m">M</a>
        <a href="${pluginRoot}?list=n">N</a>
        <a href="${pluginRoot}?list=o">O</a>
        <a href="${pluginRoot}?list=p">P</a>
        <a href="${pluginRoot}?list=q">Q</a>
        <a href="${pluginRoot}?list=r">R</a>
        <a href="${pluginRoot}?list=s">S</a>
        <a href="${pluginRoot}?list=t">T</a>
        <a href="${pluginRoot}?list=u">U</a>
        <a href="${pluginRoot}?list=v">V</a>
        <a href="${pluginRoot}?list=w">W</a>
        <a href="${pluginRoot}?list=x">X</a>
        <a href="${pluginRoot}?list=y">Y</a>
        <a href="${pluginRoot}?list=z">Z</a>
        <a href="${pluginRoot}?list=-">?</a>
    </span>
    <input type="text" id="searchField"/>
    <button id="searchBtn">${obr.action.search}</button>
</div>

<table id="resTable" class="nicetable">
    <thead>
        <tr>
            <th class="col_ResName">${obr.res.name}</th>
            <th class="col_VersionInst">${obr.res.installedVer}</th>
        </tr>
    </thead>
    <tbody>
        <tr><td colspan="2">dummy</td></tr>
    </tbody>
</table>

<table id="detailsTable" class="nicetable ui-helper-hidden">
    <tbody id="detailsTableBody">
    </tbody>
</table>

<br/>

</div> <!-- ifStatusOK -->