<div class="panel panel-default">
  <div class="panel-heading">
    <a href="{{path('admin_v2_cloud_video_upgrade')}}" target="_blank">{{'admin.edu_cloud.edu_video.upgrade'|trans}}</a>｜
    {% if video.renewVideo.status == true %}
      <span class="text-success">{{'admin.edu_cloud.edu_video.renewed'|trans}}</span>
      <span class="text-info pts">
        {{video.renewVideo.message|default('')}}
      </span>
    {% else %}
      <a href="{{path('admin_v2_cloud_video_renew')}}" target="_blank">{{'admin.edu_cloud.edu_video.renew'|trans}}</a>
    {% endif %}
  </div>
  <div class="panel-body">
    <div class="row pvm">
      <div class="col-sm-2 text-right">
        {{'admin.edu_cloud.edu_video.storage_space'|trans}}
      </div>
      <div class="col-xs-7">
        <div class="progress mbm cloud-progress">
          <div class="progress-bar progress-bar-storage progress-bar-info" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: {{space.usedPercentage}}%">
            <span class="sr-only">100% Complete</span>
          </div>
        </div>
        <span class="text-danger">{{space.usedSpace}}GB</span>/{{space.freeSpace}}GB
      </div>
      {% if space.overUsedSpace %}
        <div class="col-xs-1" style="width:100px;padding-left:0">
          <div class="progress mbm cloud-progress">
            <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="10" style="width: 100%">
              <span class="sr-only">100% Complete</span>
            </div>
          </div>
          <div class="text-danger text-center">{{'admin.edu_cloud.edu_video.over_use_space'|trans({'%overUsedSpace%': space.overUsedSpace})}}</div>
        </div>
      {% endif %}
    </div>
    <div class="row pvm">
      <div class="col-sm-2 text-right">
        {{'admin.edu_cloud.edu_video.month_flow'|trans}}
      </div>
      <div class="col-xs-7">
        <div class="progress mbm cloud-progress">
          <div class="progress-bar progress-bar-storage" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: {{flow.usedPercentage}}%">
            <span class="sr-only">60% Complete</span>
          </div>
        </div>
        <span class="text-danger">{{flow.usedFlow}}GB</span>/{{flow.freeFlow}}GB
      </div>
      {% if flow.overUsedFlow != 0 %}
        <div class="col-xs-1" style="width:100px;padding-left:0">
          <div class="progress mbm cloud-progress">
            <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="10" style="width: 100%">
              <span class="sr-only">100% Complete</span>
            </div>
          </div>
          <div class="text-danger text-center">{{'admin.edu_cloud.edu_video.over_use_space'|trans({'%overUsedSpace%': flow.overUsedFlow})}}</div>
        </div>
      {% endif %}
    </div>
    <div class="row pvm">
      <div class="col-sm-2 text-right">
      {{'admin.edu_cloud.edu_video.service_time'|trans}}
      </div>
      <div class="col-sm-7">
         {{video.firstday}} ~ {{video.lastday}}
      </div>
      <div class="col-sm-offset-2 col-sm-7">
        <div class="text-danger">
          {{video.message}}
        </div>
      </div>
    </div>

    {% if video.renewVideo.status == true %}
    <div class="row pvm mvm">
      <div class="col-sm-2 pvs text-right">
      {{'admin.edu_cloud.edu_video.effective_service'|trans}}
      </div>
      <div class="col-sm-3 pvs">
        {{video.renewVideo.startDate}} ~ {{video.renewVideo.endDate}}

      </div>
      <div class="col-sm-2">
        <a href="#modal" data-toggle="modal" class="btn btn-default btn-sm"
           data-url="{{path('admin_v2_cloud_video_overview_renew',{renewVideo: video.renewVideo} )}}">
          {{ 'admin.edu_cloud.edu_video.check'|trans }}
        </a>
      </div>
    </div>
    {% endif %}

  </div>
</div>
