<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="../scripts/NDD_Constants.js"></script>
<script src="scripts/NDD_Browser_UI_HTML.js"></script>
<link href="css/NDD_Browser_UI_HTML.css" rel="stylesheet" type="text/css">
</head>
<body>
  <div id="tabContainer">
    <div id="tabs">
      <ul>
        <li id="tabHeader_1"></li>
        <li id="tabHeader_2"><span id="bootstrapTabLabel"></span>
            <img src="img/exp.png" id="bootstrapHelpLink" class="help" onclick="openHelpPage();" style="display: none;">
        </li>
      </ul>
    </div>
    <div id="tabscontent">
      <div id="tabpage_1" style="height: 100%;">
         <table style="width: 100%; height: 90%; padding-left: 9px; padding-right: 9px; text-align: left; line-height: 21px; vertical-align: top; margin-top: 6px;">
          <tbody>
            <tr style="height: 40px;">
              <td id="titleLabel" class="sectionHeader" style="width: 30%;"></td>
              <td style="width: 70%; vertical-align: top;"><input name="title" id="title" type="text" class="noneInputBox"></td>
            </tr>
            <tr style="height: 40px;">
              <td id="docTypeLabel" class="sectionHeader" style="width: 30%;"></td>
              <td style="width: 70%; vertical-align: top;"><select id="dtd" class="attachStyle"></select></td>
            </tr>
            <tr>
              <td id="attachCssNoneLabel" class="sectionHeader" style="width: 30%;"><br><br></td>
              <td style="width: 70%; vertical-align: top;">
                <table>
                  <tbody>
                    <tr>
                      <td><select id="attachCssList" size="3" multiple class="attachStyle"></select></td>
                      <td style="width: 65px;">
                        <table class="none_icons">
                          <tbody>
                            <tr>
                              <td><input type="image" src="img/link.png" id="attachCssAdd" class="icons"></td>
                            </tr>
                            <tr>
                              <td>
                                  <input type="image" src="img/delete.png" id="attachCssRemove" class="icons deleteIconDisabled" disabled="true"></td>
                            </tr>
                          </tbody>
                        </table>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </td>
            </tr >
         </tbody>
        </table>
        <table style="width:100%; height: 10%;">
            <tr>
                <td style="vertical-align: bottom;">
                    <span class="extract" style="width: 100%;">
                      <img src="img/extract_app.png" class="extract_icon">
                      <input id="extractCBNone" type="checkbox" class="extractCheckbox">
                      <span id="extractNoneLabel"></span>
                    </span>
                </td>
            </tr>  
        </table>
        
     </div>
     <div id="tabpage_2" style="height: 100%;">
      <table style="width: 100%; height: 90%; padding-left: 9px; padding-right: 9px; text-align: left; line-height: 21px; margin-top: 6px;">
      <tbody>
        <tr>
          <td id="bootstrapCssLabel" class="sectionHeader" style="width: 30%;"></td>
          <td style="width: 70%; height: 50px; vertical-align: top;">
                <table>
                    <tbody>
                        <tr>
                          <td><input type="radio" name="radiogrp" id= "generateBootstrap" value="generate" checked="checked"></td>
                          <td> <span id="createNewLabel"></span></td>
                        </tr>
                        <tr>
                          <td><input type="radio" name="radiogrp" id="existingBootstrap" value="custom"></td>
                          <td><span id="useExistingLabel"></span></td>
                        </tr>
                    </tbody>
                </table>
            </td>
        </tr>
        <tr id="useExistingBox" style="height: 30px; vertical-align:top; display: none;">
            <td style="width: 30%;"></td>
            <td style="width: 70%;">
                <input type="text" id="bootstrapPath" class="bootstrapPathInputBox" readonly>
                <input id="dwBootCSSSrcBtn" placeholder="" type="image" style="vertical-align:middle;" src="img/link.png">
            </td>
        </tr>
        <tr style="height: 80px;">
            <td id="attachCssBSLabel" class="sectionHeader" style="width: 30%;"><br><br></td>
            <td style="width: 70%; vertical-align: top;">
                <table style="height: 80px;">
                  <tbody>
                    <tr>
                      <td><select id="attachCssListBootstrap" size="3" multiple class="attachStyle"></select></td>
                      <td style="width: 65px;">
                        <table class="none_icons">
                          <tbody>
                            <tr>
                              <td><input type="image" src="img/link.png" id="attachCssAddBootstrap" class="icons"></td>
                            </tr>
                            <tr>
                              <td>
                                  <input type="image" src="img/delete.png" id="attachCssRemoveBootstrap" class="icons deleteIconDisabled" disabled="true"></td>
                            </tr>
                          </tbody>
                        </table>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </td>
        </tr>
        <tr style="height: 30px;">
            <td id="deisgnLabel" class="sectionHeader" style="width: 30%;"></td>
            <td style="vertical-align: top; width: 70%;">
                <input id="prebuiltLayout" type="checkbox" value="prebuilt" checked="checked" style="width: 22px;">
                <span id="prebuiltLayoutLabel"></span>
            </td>
        </tr>
        <tr id="showAdvanceSettingsText" style="width: 100%; height: 30px;">
        <td class="sectionHeader" style="width: 30%;">
                <a href="#" id="customizeText" class="showLink custom" onclick="showHide();"></a>
            </td>
          <td style="width: 70%; vertical-align:text-center;"><hr></td>  
        </tr>
        <tr id="customizeTextDesc" style="width: 100%;">
            <td style="width: 30%;"></td>
            <td style="width: 70%;">
                <a href="#" id="customizeDescLabel" class="custom" onclick="showHide();" style="text-decoration: none;"></a>
            </td>
        </tr>
        <tr style="width: 100%;">
            <td style="width: 30%;">
                <table style="width: 100%; height: 100%;">
                    <tr style="height: 35%;">
                        <td></td>
                    </tr>
                    <tr style="height: 65%;">
                        <td>
                            <table style="width: 100%; height: 100%;">
                                <tr style="height: 47%;">
                                    <td id="screenLabel" class="sectionHeader" style="vertical-align: bottom; display: none;"></td>
                                </tr>
                                <tr style="height: 53%;"><td></td></tr>
                            </table>
                        </td>
                    </tr>
                </table>
            </td>
            <td style="width: 70%; vertical-align:top;">
                <table id="advanceSettings" style="width: 100%; height: 100%; display: none;">
                    <tbody>
                        <tr style="height: 35%;">
                            <td style="width: 50%;">
                                <span id="columnLabel"></span>
                                <input id="noOfColumn" type="text" class="pixels" value="12">
                            </td>
                            <td style="width: 50%;">
                                <span id="gutterLabel"></span>
                                <input id="gutterWidth" type="text" class="pixels" value="30"> px 
                            </td>
                        </tr>
                        <tr style="height: 65%;">
                            <td style="margin-left:0px; padding-left:0px; text-align:left;">
                                <table style="width: 200%; height:100%; text-align: left;">
                                    <tbody text-align="center">
                                        <tr style="height: 47%; vertical-align: bottom;">
                                          <td id="smallLabel" style="width: 32%;"></td>
                                          <td id="mediumLabel" style="width: 36%;"></td>
                                          <td id="largeLabel" style="width: 32%;"></td>
                                        </tr>
                                        <tr style="height: 53%;">
                                          <td><input id="screenSmall" type="text" class="pixels" value="768">
                                            <span>px</span></td>
                                          <td><input id="screenMedium" type="text" class="pixels" value="992">
                                            <span>px</span></td>
                                          <td><input id="screenLarge" type="text" class="pixels" value="1200">
                                            <span>px</span></td>
                                        </tr>
                                    </tbody>
                                </table>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </td>
        </tr>
      </tbody>
    </table>
         
    <table style="height: 10%; width: 100%;">
     <tr>
        <td style="vertical-align: bottom;">
            <span class="extract" style="width: 100%;">
                <img src="img/extract_app.png" class="extract_icon">
                <input id="extractCBBootstrap" type="checkbox" class="extractCheckbox">
                <span id="extractBootstrapLabel"></span>
            </span>
        </td>
     </tr>
    </table>
         
 </div>
</div>
<div id="msgBox"></div>
</body>
</html>
