<div class="row bd-callout bd-callout-warning">
  <h5 id="conveying-meaning-to-assistive-technologies">Assessment Selection for the Project</h5>

  <p>Making project-based assessment work takes careful planning and a willingness to be flexible, as no two student projects will be alike. If you'd like to try project-based assessment , consider these best practices from <strong>iTrack's Owned Question Bank</strong>:
  </p><p>
  Assessments are listed based on below skills:<br>
  <code class="highlighter-rouge">Windows Server</code> <code class="highlighter-rouge">Hadoop</code></p>
</div>
<div class="row"> 
  
  {{# hasanydata }} 

  {{# has_assessments }}  
  
  <div class="col-md-3 ">
    <div class="card weather-card" style="width: 22rem;box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);">
      <div class="card-body pb-3">

                                     
                <h4 class="card-title font-weight-bold">{{title}}</h4>
                <p class="card-text">{{domain}}</p>
                <div class="switchbox">
                  <label class="switch">
                    <input type="checkbox" class="toggleClass" disabled id="sb_{{id}}">
                    <span class="subscribe round"></span>
                  </label>
                </div>
                <div class="d-flex justify-content-between">
                  <p class="display-1 degree">
                    ${{price}}
                  </p>
                </div>
                <div class="d-flex justify-content-between mb-4">
                  <p><i class="fa fa-clock-o fa-lg text-info pr-2"></i>{{duration}} mins</p>
                  <p><i class="fa fa-tags fa-lg grey-text pr-2"></i>{{questions}} questions</p>
                </div>
                <hr class="">
                <div class="set-price">
                  <a class="btn btn-pink waves-effect waves-light subscribe-settings" id="{{id}}">
                    <i class="fa fa-thumbs-up left"></i> Subscribe & Pay
                  </a>
                  <a class="btn btn-grey disabled waves-effect waves-light pay-settings" id="pay_{{id}}" style="display:none">
                    <i class="fa fa-inr right"></i> Pay Now
                  </a>
                  <a class="btn btn-grey disabled waves-effect waves-light pay-settings" id="paylater_{{id}}" style="display:none">
                    <i class="fa fa-inr right"></i> Pay Later
                  </a>
                  {{{paybtn}}}
                </div>

      </div>
    </div>
  </div>

  <div id="myModal{{id}}" class="modal fade" role="dialog">
    <div class="modal-dialog">

      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Settings: <span class="assesshead text-capitalize">{{title}}</span></h4>
          </button>
        </div>
        <div class="modal-body">
          <div class="modal-body mx-3">
            <div class="md-form mb-5">
              <i class="fa fa-university prefix grey-text"></i>
              <label data-error="wrong" data-success="right" for="form3">
               Assessment Price
              </label>
              <input type="hidden" name="assessid" value="{{ id }}">
              <input type="text" name="asprice" id="asprice{{id}}" value="{{ price }}" required>
              
            </div>
          </div>          
        </div>
        <div class="modal-footer d-flex justify-content-center">
          <button id="assignprice{{id}}" value="{{id}}" class="btn btn-icon btn-success">Submit
            <i class="fas fa-paper-plane-o ml-1"></i></button>
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>

    </div>
  </div>

  {{/ has_assessments }}

  {{/ hasanydata}}

  {{^ hasanydata }}
        <div class="col-12">{{#str}} nodataavail, local_myassessments {{/str}}</div>
  {{/ hasanydata }}

</div>


  
