products.html

<div data-role="page" id="landing_page">
    <div data-role='header' data-position='inline' data-theme='d'>
	    <h1>Tech Trader</h1>
      <a id='add_product_page_button' href='#add_product_page' data-transition="slide" data-icon="add" data-iconpos="notext" class="ui-btn-right"></a>
   	</div>
	
  <div id="content" data-role="content">
    <div data-role="controlgroup">
        <a href='#list_categories_page' data-role="button" data-transition="slide">Buy</a>
        <a href='#add_product_page' data-role="button" data-transition="slide">Sell</a>
        <a href='#list_products_page' id="my_products_link" data-role="button" data-transition="slide">My Products</a>
    </div>

	</div>
</div>
<!--******************************************************************************************************************************-->
<div data-role="page" id="list_categories_page">
    <div data-role='header' data-position='inline' data-theme='d'>
	    <h1>Categories</h1>
   	</div>
	
  <div id="content" data-role="content">
    <script id="category_list_row_template" type="text/x-jquery-tmpl">
      <li class="category_list_row" id="category_${id}">
        <a href='#list_products_page&category_id=${id}' class='category' data-id='${id}' data-transition="slide">${name}</a>
      </li>
    </script>
      
		<ul id="categories_list" data-role="listview" data-inset="true" data-filter="false" data-theme="c" data-divider-theme="b">
		</ul>
	</div>
</div>
<!--******************************************************************************************************************************-->
<div data-role="page" id="list_products_page">
    <div data-role='header' data-position='inline' data-theme='d'>
	    <h1>Products</h1>
        <a id='add_product_page_button' href='#add_product_page' data-transition="slide" data-icon="add" data-iconpos="notext" class="ui-btn-right"></a>
   	</div>
	
  <div id="content" data-role="content">
    <script id="product_list_row_template" type="text/x-jquery-tmpl">
      <li class="product_list_row" id="product_${id}">
        <a href='#view_product_page&product_id=${id}' class='product' data-id='${id}' data-transition="slide">
          <h1>${title}</h1>
          <h4 class="price">${price}</h4>
        </a>
      </li>
    </script>
      
		<ul id="products_list" data-role="listview" data-inset="true" data-filter="true" data-theme="c" data-divider-theme="b">
		</ul>
	</div>
</div>
<!--******************************************************************************************************************************-->
<div data-role="page" id="add_product_page">
	<div data-role="header" data-position="inline" data-theme='d'>
		<a href="#landing_page" data-direction="reverse" data-icon="back" data-theme="d" data-iconpos="notext">Cancel</a>
    <h1 class='head_title'>Add Product</h1>
  </div>
	<div id="add_product_content" data-role="content">
    <div class="product_form">
      <div data-role="fieldcontain">
        <label>Title: <input type="text" id="add_product_title" name="add_product_title" /></label>
      </div>
      <div data-role="fieldcontain">
        <label>Description: <input type="text" id="add_product_description" name="add_product_description" /></label>
      </div>
      <div data-role="fieldcontain">
        <label>Price: <input type="text" id="add_product_price" name="add_product_price" /></label>
      </div>

      <div data-role="fieldcontain">
        <label for="add_product_categories" class="select">Choose category:</label>
        <select name="add_product_categories" class="add_product_categories">
          <option value="7">Miscellaneous</option>
        </select>
        <script id="category_option_template" type="text/x-jquery-tmpl">
          <option value="${id}">${name}</option>
        </script>

      </div>
      <a id="add_button" href="#view_product_page" data-role="button" data-direction="reverse" data-icon="plus" data-theme="d">Add</a>
    </div>
	</div>
</div>
<!--******************************************************************************************************************************-->
<div data-role="page" id="view_product_page">
	<div data-role="header" data-position="inline" data-theme='d'>
		<a href="#landing_page" data-direction="reverse" data-icon="back" data-theme="d" data-iconpos="notext">Cancel</a>
    <h1 class='head_title'>View Product</h1>
  </div>
  <script id="product_template" type="text/x-jquery-tmpl">
    <h1 class="title">${title}</h1>
    <h4 class="price">${price}</h4>
    <h4>${description}</h4>
    <div class="actions ${ (window.currentUser == $data.user_id) ? 'mine' : 'not-mine' }">
      <button data-role="button" class="contact" data-id="${user_id}">Email Seller</button>
      <a href="#edit_product_page&product_id=${id}" data-role="button" class="edit" data-id="${id}">Edit</a>
    </div>
  </script>

  <div id="view_product_content" data-role="content">	
	</div>
</div>
<!--******************************************************************************************************************************-->
<div data-role="page" id="edit_product_page">
	<div data-role="header" data-position="inline" data-theme='d'>
		<a href="#landing_page" data-direction="reverse" data-icon="back" data-theme="d" data-iconpos="notext">Cancel</a>
    <h1 class='head_title'>Edit Product</h1>
  </div>
  <script id="edit_product_template" type="text/x-jquery-tmpl">
    <h2 class="title" data-id=${id}>${title}</h2>
    <div data-role="fieldcontain">
      <label>Description: <input type="text" id="edit_product_description" name="edit_product_description" value="${description}" /></label>
    </div>
    <div data-role="fieldcontain">
      <label>Price: <input type="text" id="edit_product_price" name="edit_product_price" value="${price}" /></label>
    </div>
  </script>
  <div id="edit_product_content" data-role="content">

    <div class="product_form">
    </div>
    
    <div data-role="fieldcontain">
      <label for="add_product_categories" class="select">Choose category:</label>
      <select name="add_product_categories" class="add_product_categories">
        <option value="7">Miscellaneous</option>
      </select>
    </div>
    <a id="edit_button" href="#view_product_page" data-role="button" data-direction="reverse" data-icon="plus" data-theme="d">Save</a>
    <a href="#landing" id="remove_button" data-role="button" data-direction="reverse" data-icon="delete" data-theme="d">Delete</a>
	</div>
</div>
<!--******************************************************************************************************************************-->
<div data-role="dialog" id="error_dialog" >
	<div data-role="header" data-position="inline" data-theme='d'>
        <h1 role="heading">Error</h1>
    </div>
	<div id="error_dialog_content" data-role="content">
		<script id="error_message_template" type="text/x-jquery-tmpl">
			<div id="error_message">
				<center>
            <div><h2 id="errorName">${errorName}</h2></div>
						<div id="errorDescription">${errorDescription}</div>
				</center>
			</div>
		</script>
	</div><!-- /content -->
</div><!-- /dialog -->