﻿<div class="larger-font">
    <div class="documentList">
        <h3>Documents
            <input type="button" value="Add" class="GlassyButton" data-bind="click: addDocument" style="height: 26px; margin-left: 20px;" />
            <input type="button" value="View" class="GlassyButton" data-bind="click: viewDocument, visible: documents().length > 0" style="height: 26px; display: none"  />
            <input type="button" value="Remove" class="GlassyButton" data-bind="click: removeDocument, visible: documents().length > 0" style="height: 26px; display: none" />      
        </h3>                       
        <table class="ListControl Alternate" data-bind="selectableGrid: {}" style="width: 100%; margin-top: 0px">
            <thead>
                <tr>                    
                    <td style="min-width: 120px">Description
                    </td>
                    <td>Uploaded By
                    </td>
                    <td>Uploaded Date
                    </td>
                </tr>
            </thead>
            <tbody data-bind="foreach: documents" >
                <tr class="alternate" data-bind="click: $root.documentSelect">
                    <td data-bind="html: Description"></td>
                    <td data-bind="html: UploadedUser"></td>
                    <td data-bind="html: DateTimeFormatter(UploadedDate)"></td>
                </tr>
            </tbody>
        </table>        
    </div>
</div>
