<div class="row">
    <div class="col-sm-12 col-md-8">
        <div class="col-sm-12 myproject-card">
            <h3 class="mb-20">My Project</h3>
            <div class="d-flex mb-10">
                <div class="col-sm-12 col-md-6">
                    <div class="color-9b">Name</div>
                    <div class="pt-5">{{{projectName}}}</div>
                </div>
                <div class="col-sm-12 col-md-6">
                    <div class="color-9b">Deadline</div>
                    <div class="pt-5">{{{deadline}}}</div>
                </div>
            </div>
            <div class="col-sm-12 pt-10 mb-10">
                <div class="color-9b">Statement</div>
                <div class="pt-5">
                    {{{projectstatement}}}
                </div>
            </div>
            <div class="col-sm-12 pt-10 mb-10">
                <div class="color-9b">Summary</div>
                <div class="pt-5">
                    {{{projectSummary}}}
                </div>
            </div>
        </div>

        <!--PROJECT ID -->
        <input type="hidden" id="projectid" value={{projectid}}>

        <div class="col-sm-12 myproject-card milestone-table">
            <h3 class="mb-20"><i class="fa fa-list-ul brand-color pr-5" aria-hidden="true"></i> Milestones</h3>
            <table id="milestoneTable" class="table">
                <thead>
                    <tr>
                        <th scope="col">Sl.No</th>
                        <th scope="col">Goal</th>
                        <th scope="col" style="width: 120px;">Cost (in ₹)</th>
                        <th scope="col">Deadline</th>
                        <th scope="col" style="width: 150px;">Submitted on</th>
                        <th scope="col">Status</th>
                        <!-- <th scope="col">Action</th> -->
                    </tr>
                </thead>
                <tbody>
                    {{#data}}
                    <tr>
                        <td scope="row">{{sn}}.</td>
                        <td>{{goals}}</td>
                        <td>{{cost}}</td>
                        <td>{{{deadline}}}</td>
                        <td>{{submittedon}}</td>
                        <td><span class="updated-status {{{status_class}}}">{{progressstatus}}</span></td>
                        <!-- <td>
                                {{#status1}}
                                    <button type="button" class="milestonesbutton btn  btn-sm btn-outline {{btntype}}" value='{{goalid}}' {{#disable}}disabled{{/disable}}>{{status}}</button>
                                {{/status1}} 
                                {{#status2}}
                                    <button type="button" class=" milestonesbutton btn  btn-sm btn-outline btn-danger" value='{{goalid}}'>{{status0}}</button>
                                {{/status2}}
                            </td> -->
                    </tr>
                    {{/data}}
                </tbody>
            </table>
        </div>
        <div class="col-sm-12 myproject-card milestone-table">
            <h3 class="mb-20"><i class="fa fa-folder-open brand-color" aria-hidden="true"></i> Documents</h3>
            <table class="table">
                <thead>
                    <tr>
                        <th scope="col">Sl.No</th>
                        <th scope="col">Document</th>
                        <th scope="col">Deadline</th>
                        <th scope="col" colspan="2">Status</th>
                    </tr>
                </thead>
                <tbody>
                    {{#data1}}
                    <tr>
                        <td scope="row">{{sn}}.</td>
                        <td>{{docs}}</td>
                        <td>{{deadline}}</td>
                        <td>{{#status1}}
                            <button type="button" class="btn btn-sm btn-outline {{btntype}}" value='{{userid}}'
                                {{#disable}}disabled{{/disable}}>{{status}}</button>
                            {{/status1}}
                            {{#status2}}
                            {{{status0}}}
                            {{/status2}}
                            {{#status3}}
                            <span class="updated-status {{{status_class}}}">{{progressstatus}}</span>
                            {{/status3}}
                        </td>
                    </tr>
                    {{/data1}}
                </tbody>
            </table>
        </div>
    </div>
    <div class="col-sm-12 col-md-4">
        <div class="col-sm-12 myproject-card project-statuscard">
            <h3 class="mb-20"><i class="fa fa-line-chart" aria-hidden="true"></i> Progress</h3>
            <div class="col-sm-12">
                <div class="progress-percentage">{{project_progress_percentage}}% Completed</div>
                <div class="progress">
                    <div class="progress-bar" role="progressbar" style="width: {{project_progress_percentage}}%" aria-valuenow="0" aria-valuemin="0"
                        aria-valuemax="{{project_progress_percentage}}"></div>
                </div>
            </div>
        </div>
        <div class="col-sm-12 myproject-card assignedteam-card">
            <h3 class="mb-20"><i class="fa fa-users brand-color pr-10" aria-hidden="true"></i>Assigned Team</h3>
            <div class="row">
                <div class="mb-10 col-sm-12 d-flex">
                    <div class="col-sm-12 col-md-6">
                        <div>
                            <strong>Guide</strong>
                            {{#guide}}
                            <div>{{guidename}}</div>
                            {{{guidedp}}}
                            {{/guide}}
                            {{^guide}}
                            <div>Not Invited</div>
                            {{/guide}}
                        </div>
                    </div>
                    <div class="col-sm-12 col-md-6">
                        <div>
                            <strong>Lead</strong>
                            <div>{{TLName}}</div>
                            {{{TLdp}}}
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-12 mt-20 ">
                    <strong class="col-sm-12">Team Members</strong>
                    <div class="row">
                        <div class="col-sm-12 d-flex ">
                            {{#teammembers}}
                            <div class="col-sm-12 col-md-4">
                                <div>
                                    <div>{{name}}</div>
                                    {{{TMdp}}}
                                </div>
                            </div>
                            {{/teammembers}}
                            {{^teammembers}}
                            <div>No memebers added yet</div>
                            {{/teammembers}}
                        </div>
                    </div>
                </div>

            </div>
        </div>
        <!-- <div class="col-sm-12 myproject-card assignedteam-card">
            <h3 class="mb-20"><i class="fa fa-comments brand-color pr-10" aria-hidden="true"></i>Team Chat</h3>
            <div class="text-center comments-block">
            <div><strong>No Conversation Yet</strong></div>
             <div>You can @mention someone to start a conversation</div>
            </div>
            <hr>
            <div class="row mt-20 mb-20">
            <div class="col-sm-12 comments-input-section">
                <div class="input-group mb-3">
                <input type="text" class="form-control" disabled placeholder="Write Comment or @mention" aria-label="Recipient's username" aria-describedby="basic-addon2">
                <div class="input-group-append">
                    <span class="input-group-text" aria-disabled="true" id="basic-addon2">Send</span>
                </div>
                </div>
            </div>
            </div>
        </div> -->
    </div>
</div>