<div style="margin-left: 10px; margin-right: 10px">
    <div class="row">
        <div class="col-md-12">
            <h2>Inspect MdStore <a href="#/list" class="btn btn-primary btn-sm"><span
                    class="glyphicon glyphicon-step-backward"></span>
                Back</a></h2>


            <div class="panel panel-default">
                <div class="panel-heading">
                    <a class="accordion-toggle" data-toggle="collapse" data-target="#collapse_format">
                        <b>MdStore Info</b>
                    </a>
                </div>
                <div id="collapse_format" class="panel-collapse collapse in">
                    <div class="panel-body">
                        <table cellpadding="10">
                            <tr>
                                <td align="right">
                                    <b>Id: </b>
                                </td>
                                <td>
                                    <i style=" padding-left:10px">{{mdStoreInfo.id}}</i>
                                </td>
                                <td style=" padding-left:10px">
                                    <a style=" padding-left:10px" href="isManager.do#/profile/{{mdStoreInfo.id}}"
                                       class="btn btn-primary btn-sm">
                                        <span class="glyphicon glyphicon-search"></span>
                                        View Profile
                                    </a>
                                </td>
                                <td style=" padding-left:10px">
                                    <a href="" class="btn btn-primary btn-sm" ng-click="loadInfo()"><span
                                            class="glyphicon glyphicon-refresh"></span> Refresh Info</a>
                                </td>
                            </tr>
                            <tr>
                                <td align="right">
                                    <b>format: </b>
                                </td>
                                <td>
                                    <i style=" padding-left:10px">{{mdStoreInfo.format}}</i>
                                </td>
                                <td></td>
                            </tr>
                            <tr>
                                <td align="right">
                                    <b>layout: </b>
                                </td>
                                <td>
                                    <i style=" padding-left:10px">{{mdStoreInfo.layout}}</i>
                                </td>
                                <td></td>
                            </tr>
                            <tr>
                                <td align="right">
                                    <b>interpretation: </b>
                                </td>
                                <td>
                                    <i style=" padding-left:10px">{{mdStoreInfo.interpretation}}</i>
                                </td>
                                <td></td>
                            </tr>
                            <tr>
                                <td align="right">
                                    <b>last storage date: </b>
                                </td>
                                <td>
                                    <i style=" padding-left:10px">{{mdStoreInfo.lastStorageDate}}</i>
                                </td>
                                <td></td>
                            </tr>
                            <tr>
                                <td align="right">
                                    <b>Number of Elements: </b>
                                </td>
                                <td>
                                    <i style=" padding-left:10px">{{mdStoreInfo.size}}</i>
                                </td>
                                <td></td>
                            </tr>
                            <tr>
                                <td align="right">
                                    <b>Service URI: </b>
                                </td>
                                <td>
                                    <i style=" padding-left:10px">
                                        <a href="{{mdStoreInfo.serviceURI}}">{{mdStoreInfo.serviceURI}}</a>
                                    </i>
                                </td>
                                <td></td>
                            </tr>

                        </table>

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


    <div class="row">
        <div class="col-md-12">

            <div class="panel panel-default">
                <div class="panel-heading">
                    <a class="accordion-toggle" data-toggle="collapse" data-target="#collapse_query">
                        <b>MdStore Query</b>
                    </a>
                </div>
                <div id="collapse_query" class="panel-collapse collapse in">
                    <div class="panel-body">
                        <table cellpadding="10">
                            <tr>
                                <td align="right" style="width:10%">
                                    <b>Id: </b>
                                </td>
                                <td style=" padding-left:10px; width:90%">
                                    <input type="text" class="form-control" ng-model="queryValues['id']"
                                           placeholder="Enter an identifier to search (fast)">
                                </td>
                            </tr>
                            <tr>
                                <td align="right">
                                    <b>Free search: </b>
                                </td>
                                <td style=" padding-left:10px">
                                    <input type="text" class="form-control" ng-model="queryValues['body']"
                                           placeholder="Enter a free text to search (slow)">
                                </td>
                            </tr>

                            <tr ng-repeat="item in mdStoreInfo.indexFields">
                                <td align="right">
                                    <b>{{item}}: </b>
                                </td>
                                <td style=" padding-left:10px">
                                    <input type="text" class="form-control" ng-model="queryValues[item]"
                                           placeholder="Search for {{item}} (fast)">
                                </td>
                            </tr>
                            <tr>
                                <td></td>
                                <td></td>
                                <td align="center">
                                    <a style=" padding-left:10px" href=""
                                       class="btn btn-primary btn-lg" ng-click=startSearch()>
                                        <span class="glyphicon glyphicon-search"></span>
                                        Search
                                    </a>
                                </td>
                            </tr>


                        </table>

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

    <div class="row">
        <div class="col-md-12 ">
            <h3>Number of results: {{searchResult.total}}</h3>
        </div>
    </div>
    <div class="row">
        <div class="col-md-2 text-left">
            results overrideFrom {{from_page + 1 }} to {{to_page}}
        </div>
        <div class="col-md-9 text-center">
            <ul class="pagination">
                <li>
                    <a href="" ng-click="prevPage()">&laquo;
                    </a>
                </li>
                <li>
                    <a href="" ng-click="nextPage()">&raquo;
                    </a>
                </li>
            </ul>
        </div>
    </div>

    <div class="row" ng-repeat="item in searchResult.records">
        <div class="col-md-12">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <a class="accordion-toggle" data-toggle="collapse" data-target="#collapse_{{$index}}">
                        <b>{{$index+1 + from_page}}</b>
                    </a>
                </div>
                <div id="collapse_{{$index}}" class="panel-collapse collapse in">
                    <div class="panel-body">
                        <pre><code class="xml_code">{{item}}</code></pre>
                    </div>


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


</div>
