<view class="container">

  <view class="page-body">
    <view class="page-section">
      <block wx:if="{{recording === false && playing === false && hasRecord === false}}">
        <view class="page-body-time">
          <text class="time-big">{{formatedRecordTime}}</text>
        </view>
        <view class="page-body-buttons">
          <view class="page-body-button"></view>
          <view class="page-body-button" bindtap="startRecord">
            <image src="../../images/record.svg"></image>
          </view>
          <view class="page-body-button"></view>
        </view>
      </block>

      <block wx:if="{{recording === true}}">
        <view class="page-body-time">
          <text class="time-big">{{formatedRecordTime}}</text>
        </view>
        <view class="page-body-buttons">
          <view class="page-body-button"></view>
          <view class="page-body-button" bindtap="stopRecord">
            <view class="button-stop-record"></view>
          </view>
          <view class="page-body-button"></view>
        </view>
      </block>

      <block wx:if="{{hasRecord === true && playing === false}}">
        <view class="page-body-time">
          <text class="time-big">{{formatedPlayTime}}</text>
          <text class="time-small">{{formatedRecordTime}}</text>
        </view>
        <view class="page-body-buttons">
          <view class="page-body-button"></view>
          <view class="page-body-button" bindtap="playVoice">
            <image src="../../images/play.png"></image>
          </view>
          <view class="page-body-button" bindtap="clear">
            <image src="../../images/trash.png"></image>
          </view>
        </view>
      </block>

      <block wx:if="{{hasRecord === true && playing === true}}">
        <view class="page-body-time">
          <text class="time-big">{{formatedPlayTime}}</text>
          <text class="time-small">{{formatedRecordTime}}</text>
        </view>
        <view class="page-body-buttons">
          <view class="page-body-button" bindtap="stopVoice">
            <image src="../../images/stop.png"></image>
          </view>

          <view class="page-body-button" bindtap="clear">
            <image src="../../images/trash.png"></image>
          </view>
        </view>
      </block>
    </view>
  </view>

</view>