@model QuestionnaireViewModel

@{
    ViewData["Title"] = "Details";
}



<div class="container p-4">
    <div>
        <a class="btn btn-primary" asp-action="Index">Back to List</a>

    </div>

    <div class="card">
        <div class="card-header">
            Details
        </div>
       
        <div class="card-body shadow rounded ">
            <div class="card-title">

               
              <h4>Questionnaire details</h4>
              <br />
                <div>
                    <span class="badge badge-warning shadow text-white m-1 p-2">ID</span>
                </div>
              <div>
                 <span class="badge badge-primary shadow m-1 p-2">Questionnaire</span>
              </div>
                <div>
                    <span class="badge badge-success shadow m-1 p-2">Question</span>
                </div>
                <div>
                    <span class="badge badge-info shadow m-1 p-2">Answer</span>
                </div>
              
            </div>
            <table class="table table-responsive  table-bordered table-hover  ">
                <thead>
                    <tr >
                        <th scope="col" class="text-warning h5">ID</th>
                        <th scope="col" class="text-primary h5">Questionnaire</th>
                        <th scope="col" class="text-success h5 ">Questions</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <th scope="row"><span class="badge p-2 m-1 bg-warning shadow-sm rounded">@Model.Id</span></th>
                        <th scope="row">

                            <span class="badge p-2 m-1 bg-primary shadow-sm rounded">@Model.Title</span>
                          
                        </th>
                       
                       
                        <td class="h6">
                            <table class="table table-responsive w-100 d-block d-md-table table-bordered table-hover  ">
                                <tr >
                                    <th class="text-success">Id</th>
                                    <th class="text-success">Question</th>
                                    <th class="text-success">Question Type</th>
                                    <th class="text-info">Answers</th>
                                </tr>

                                @foreach (var question in Model.Questions)
                                {
                                    <tr>
                                        <td> <span class="badge p-2 m-1 bg-success ">@question.Id</span></td>
                                        <td>
                                            <span class="badge p-2 m-1 bg-success ">@question.Text</span>
                                        </td>
                                        <td>
                                            <span class="badge p-2 m-1 bg-success ">@question.Type</span>
                                        </td>
                                        <td>
                                            <table class="table-borderless">
                                               <tr>
                                                    <th class="text-info">Id</th>
                                                    <th class="text-info">Answer</th>
                                               </tr>
                                                @foreach (var answer in question.Answers)
                                                {
                                                   <tr>
                                                        <td>
                                                            <span class="badge p-2 m-1 bg-info shadow-sm">@answer.Id</span>
                                                        </td>
                                                        <td>
                                                            <span class="badge p-2 m-1 bg-info shadow-sm">@answer.Text</span>
                                                        </td>
                                                   </tr>
                                                       
                                                  
                                                }
                                            </table>
                                        </td>
                                    </tr>
                                }
                            </table>

                           
                        </td>

                    </tr>
                  
                </tbody>
              
            </table>
            <div>
                <a class="btn btn-primary" asp-action="Index">Back to List</a>
               
            </div>
        </div>
      
    </div>
    
    
</div>