<wicket:extend>
    <meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8" />
<link rel="stylesheet" href="/css/jquery-ui-1.8.11.custom.css">
<script type="text/javascript" src="js/jquery-1.5.1.js"></script>
<script type="text/javascript" src="js/jquery.ui.core.js"></script>
<script type="text/javascript" src="js/jquery.ui.widget.js" ></script>
<script type="text/javascript" src="js/jquery.ui.accordion.js" ></script>
<script type="text/javascript" >
    $(function() {
        $( "#accordion" ).accordion({
            collapsible: true,
            autoHeight: false
        });
    });
</script>

<div class="demo">
<table width="890">
    <tr>
        <td>
            <a>
                <img src="images/adminMovies.png" width="210" height="35" />
            </a>
        </td>
    </tr>
</table>
<div id="accordion">
    <h3><a href="#">Search Movies</a></h3>
    <div>
        <p>
            <div class="pretraga" align="center">
                <form wicket:id="searchMoviesForm">
                    <table>
                        <tr>
                            <td>
                                <label>Search:</label>
                            </td>
                            <td>
                                <input type="text" wicket:id="keyword" id="keywordSearch"/>
                            </td>
                            <td>
                                <select wicket:id="choice" id="choiceSearch">
                                    <option>Option 1</option>
                                    <option>Option 2</option>
                                </select>
                            </td>
                            <td>
                                <label>
                                    <input class="button" type="submit"  value="Search"/>
                                </label>
                            </td>
                        </tr>
                    </table>
                </form>
            </div>
            <div class="userList">
                <table width="800" border="0" align="left">
                    <tr>
                        <th>Name</th>
                        <th>Genre</th>
                        <th>Year</th>
                        <th>Price</th>
                        <th>Action</th>
                    </tr>
                    <div wicket:id=moviesListView >
                        <tr>
                            <td>
                                <strong><a wicket:id="name"></a></strong>
                            </td>
                            <td>
                                <a wicket:id="genre"></a>
                            </td>
                            <td>
                                <a wicket:id="year"></a>
                            </td>
                            <td>
                                <a wicket:id="price"></a>
                            </td>
                            <td>
                                <a wicket:id="edit" href="#" >edit</a>
                                <a>/</a>
                                <a wicket:id="delete" href="#" >delete</a>

                            </td>
                         </tr>
                    </div>
                </table>
                <div wicket:id="navigator" align="center"></div>
            </div>
        </p>
    </div>
    <h3><a href="#">Add Movie</a></h3>
    <div>
        <p>
            <form wicket:id="addMovieForm" id="contactform" >
                <span wicket:id="feedback"></span>
                <p class="no-border">
                    <strong>Please fill in all the fields</strong>
                </p>
                <table class="formFieldTable">
                    <tr>
                        <td>
                            <label for="nameAdd">Name</label><br />
                            <input wicket:id="nameAdd" id="nameAdd" type="text" tabindex="1" />
                        </td>
                        <td>
                            <label for="genreAdd">Genre</label><br />
                            <select  wicket:id="genreAdd" id="genreAdd"  type="text" tabindex="3" >
                                <option>Option 1</option>
                                <option>Option 2</option>
                            </select>
                        </td>
                    </tr>
                    <tr>

                        <td>
                            <label for="yearAdd">Year</label><br />
                            <input wicket:id="yearAdd" id="yearAdd" type="text" tabindex="4" />
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            <label for="descriptionAdd">Description</label><br />
                            <textarea wicket:id="descriptionAdd" id="descriptionAdd" rows="7" cols="20" tabindex="5"></textarea>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            <label for="crewAdd">Crew</label><br />
                            <textarea wicket:id="crewAdd" id="crewAdd" rows="5" cols="20" tabindex="7"></textarea>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <label for="priceAdd">Price</label><br />
                            <input wicket:id="priceAdd" id="priceAdd" type="text" tabindex="8" />
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            <p class="no-border" align="center">
                                <input wicket:id="addSave" class="button" type="submit" value="Add" />
                                <input class="button" type="reset" value="Cancel" />
                            </p>
                        </td>
                    </tr>
                </table>
            </form>

        </p>
    </div>
    <h3><a href="#">Edit Movie</a></h3>
        <div>
            <p>
                <form wicket:id="editMovieForm" id="contactform" >
                    <span wicket:id="feedback"></span>
                    <p class="no-border">
                        <strong>Please fill in all the fields</strong>
                    </p>
                    <table class="formFieldTable">
                        <tr>
                            <td>
                                <label for="nameEdit">Name</label><br />
                                <input wicket:id="nameEdit" id="nameEdit" type="text" tabindex="1" />
                            </td>
                            <td>
                                <label for="genreEdit">Genre</label><br />
                                <select  wicket:id="genreEdit" id="genreEdit"  type="text" tabindex="3" >
                                    <option>Option 1</option>
                                    <option>Option 2</option>
                                </select>
                            </td>
                        </tr>
                        <tr>

                            <td>
                                <label for="yearEdit">Year</label><br />
                                <input wicket:id="yearEdit" id="yearEdit" type="text" tabindex="4" />
                            </td>
                        </tr>
                        <tr>
                            <td colspan="2">
                                <label for="descriptionEdit">Description</label><br />
                                <textarea wicket:id="descriptionEdit" id="descriptionEdit" rows="7" cols="20" tabindex="5"></textarea>
                            </td>
                        </tr>
                        <tr>
                            <td colspan="2">
                                <label for="crewEdit">Crew</label><br />
                                <textarea wicket:id="crewEdit" id="crewEdit" rows="5" cols="20" tabindex="7"></textarea>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <label for="priceEdit">Price</label><br />
                                <input wicket:id="priceEdit" id="priceEdit" type="text" tabindex="8" />
                            </td>
                        </tr>
                        <tr>
                            <td colspan="2">
                                <p class="no-border" align="center">
                                    <input wicket:id="editSave" class="button" type="submit" value="Save" />
                                    <input class="button" type="reset" value="Cancel" />
                                </p>
                            </td>
                        </tr>
                        <tr>
                            <td colspan="2">
                                <a class="more" wicket:id=imageAddLink><span wicket:id=imageAddLinkLabel>Upload</span></a>
                            </td>
                        </tr>
                    </table>
                </form>
            </p>
    </div>
</div>

</div><!-- End demo -->

<div style="display: none;" class="demo-description">
<p>Click tabs to swap between content that is broken into logical sections.</p>
</div><!-- End demo-description -->
</wicket:extend>