<div class="panel panel-default">
  <div class="panel-heading">
    <a href="{{path('admin_cloud_video_upgrade')}}" target="_blank">升级</a>｜
    {% if video.renewVideo.status == true %}
      <span class="text-success">已续费</span>
      <span class="text-info pts">
        {{video.renewVideo.message|default('')}}
      </span>
    {% else %}
      <a href="{{path('admin_cloud_video_renew')}}" target="_blank">续费</a>
    {% endif %}
  </div>
  <div class="panel-body">
    <div class="row pvm">
      <div class="col-sm-2 text-right">
        存储空间
      </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">超额{{space.overUsedSpace}}GB</div>
        </div>
      {% endif %}
    </div>
    <div class="row pvm">
      <div class="col-sm-2 text-right">
        本月流量
      </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">超额{{flow.overUsedFlow}}GB</div>
        </div>
      {% endif %}
    </div>
    <div class="row pvm">
      <div class="col-sm-2 text-right">
      服务期限
      </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>
  </div>
</div>
