<div class="row review-container">
    <div class="col-sm-3">
      <span class="h1"><i class="fa fa-fw fa-user"></i></span>
      <span class="user-name">
        <%= user_name %>
      </span>
    </div>
    <div class="col-sm-9">
      <div class="card bg-light mb-3">
        <div class="card-body">
          <div class="row">
            <div class="col-sm-12">
              <p class="card-text" style="min-height:2rem;">
                <strong>対応状況:</strong>
                <% if (isAdmin) { %>
                  <span id="status-text-<%= id %>" class="status-text"><%= status %></span>
                  <select class="status-dropdown" onchange="updateStatus(<%= id %>, this.value)">
                    <option value="未対応" <%= status === '未対応' ? 'selected' : '' %>>未対応</option>
                    <option value="対応中" <%= status === '対応中' ? 'selected' : '' %>>対応中</option>
                    <option value="対応済み" <%= status === '対応済み' ? 'selected' : '' %>>対応済み</option>
                  </select>
                <% } else { %>
                  <span class="status-text"><%= status %></span>
                <% } %>
              </p>
              <p class="card-text" style="min-height: 2rem;">
                コメント:&nbsp;&nbsp;&nbsp;&nbsp;<%= description %>
              </p>
              <p class="card-text" style="min-height: 2rem;">
                <% if(photo) { %>
                <img src="data:image/png;base64,<%= photo %>" style="width:200px;height:200px" alt="Review Photo">
                <% } else { %>
                <span class="no-image">画像がありません</span>
                <% } %>
              </p>
              <p class="card-text text-muted">
                <small>
                  投稿日:
                  <%= visit ? moment(visit).format("YYYY/MM/DD") : '-' %>
                  <span> &nbsp;&nbsp;&nbsp;損傷程度:<%= padding(score) %>&nbsp;&nbsp;&nbsp;</span>
                  <span class="rate-icon <%= score <= 1 ? 'low-danger' : score <= 3 ? 'medium-danger' : 'high-danger' %>">
                    <i class="fa fa-exclamation-triangle"></i>
                  </span>
                </small>
              </p>
              <i id="like-button-<%= id %>" class="fa-<%= isLiked ? 'solid' : 'regular' %> fa-heart like-button" onclick="toggleLike(<%= id %>)"></i>
              <span id="like-count-<%= id %>" class="like-count"><%= likeCount %></span>
              <% if (isOwner || isAdmin) { %>
                <span class="delete-button" onclick="deleteReview(<%= id %>)">削除</span>
              <% } %>
              <div class="replies">
                <% if (replies && replies.length > 0) { %>
                  <% replies.forEach(function(reply) { %>
                    <div class="reply">
                      <strong><%= reply.user_name %>:</strong> <%= reply.content %><br>
                      <span class="text-muted" style="font-size: 0.8rem;"><%= moment(reply.created_at).format("YYYY/MM/DD HH:mm") %></span>
                      <% if (reply.isOwner || reply.isAdmin) { %>
                        <p class="reply-delete-button" onclick="deleteReply(<%= reply.id %>)">削除</p><br>
                      <% } %>
                    </div>
                  <% }); %>
                <% } %>
                <% if (isLoggedIn) { %>
                  <form action="/bridges/reply/<%= id %>" method="POST" class="mt-3">
                    <input type="hidden" name="bridge_id" value="<%= bridge_id %>" />
                    <div class="form-group">
                      <textarea class="form-control" name="content" rows="2" placeholder="返信を入力"></textarea>
                    </div>
                    <button type="submit" class="btn btn-primary">送信</button>
                  </form>
                <% } else { %>
                  <p class="text-muted">返信するにはログインしてください。</p>
                <% } %>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>