{% extends "base.html" %}
{% block body %}
<h1>도면으로 템플릿 추천</h1>
<p class="muted">도면 {{ nfiles }}장, 문자 {{ ntexts }}개를 읽었습니다. 아래 추정은 <b>제안</b>이며 확정이 아닙니다. 맞지 않으면 아래 6문항에서 바꾸세요.</p>

<h2>1. 추천 순위</h2>
{% set asked = rank[0].asked if rank else 0 %}
{% if rank and rank[0].matched < asked %}
<p class="warn">▲ 판단 불가: 추정한 {{ asked }}문항이 모두 맞는 템플릿이 없습니다. 가장 가까운 템플릿과 다른 문항을 확인하고, 필요하면 생성기·검사기를 추가해야 합니다.</p>
{% endif %}
<table>
  <tr><th>순위</th><th>템플릿</th><th>일치</th>{% for q, label in questions %}<th>{{ label }}</th>{% endfor %}</tr>
  {% for r in rank %}
  <tr><td>{{ loop.index }}</td><td>{{ r.name }}</td><td>{{ r.matched }} / {{ r.asked }}</td>
    {% for q, label in questions %}<td>{{ r.profile[q] }}{% if q in r.hits %} {% if r.hits[q] %}<span class="ok">● 일치</span>{% else %}<span class="fail">■ 다름</span>{% endif %}{% endif %}</td>{% endfor %}</tr>
  {% endfor %}
</table>

<h2>2. 추정 근거</h2>
<table>
  <tr><th>문항</th><th>추정</th><th>근거(도면 위치)</th><th>신뢰</th></tr>
  {% for q, label in questions %}{% set e = est[q] %}
  <tr><td>{{ label }}</td><td>{% if e[0] is none %}<span class="warn">▲ 판단 불가</span>{% else %}{{ e[0] }}{% endif %}</td><td>{{ e[1] }}</td><td>{{ e[2] or '-' }}</td></tr>
  {% endfor %}
</table>
<p class="muted">코핑 하면 형상은 정면도의 큰 R 문자(10 m 이상 = 곡선)만 보며, 작은 R(평면 모서리 등)은 제외합니다. 기초 형식은 '말뚝' 문자 유무로 정하므로, 도면에 말뚝 문구가 없는데 말뚝이 있는 경우는 틀립니다. 평면의 사각·직각과 각도는 문항이 아니라 값이라 여기서 묻지 않습니다.</p>

<h2>3. 6문항 확인 후 교각 만들기</h2>
<form method="post" action="{{ url_for('recommend_create', sid=sid) }}">
  <table>
    {% for q, label in questions %}
    <tr><th>{{ label }}</th><td><input type="text" name="ans_{{ q }}" value="{{ '' if est[q][0] is none else est[q][0] }}" required></td></tr>
    {% endfor %}
    <tr><th>철근 형상 종류가 템플릿의 재료표 형식 열과 같은가</th><td><select name="ans_rebar_shape"><option>미확인</option><option>예</option><option>아니오</option></select></td></tr>
    <tr><th>철근 생성 방식(규칙 값 / 철근별 중심선)이 같은가</th><td><select name="ans_rebar_method"><option>미확인</option><option>예</option><option>아니오</option></select></td></tr>
  </table>
  <h3>각도 값 확인 <span class="muted">(템플릿을 가르지 않는 값. 도면에서 읽어 입력하며 비워도 됩니다)</span></h3>
  <table>
    <tr><th>코핑 평면 skew (°)</th><td><input type="text" name="ans_skew_deg" size="8"></td>
        <th>받침 회전 (°)</th><td><input type="text" name="ans_bearing_rot_deg" size="8"></td>
        <th>기초 회전 (°)</th><td><input type="text" name="ans_footing_rot_deg" size="8"></td></tr>
  </table>
  <h3>결과 판정</h3>
  <p id="verdict" class="muted" role="status">템플릿과 답을 고르면 판정이 나옵니다.</p>
  <p>이름 <input type="text" name="name" required>
  형식 <select name="type"><option>T형</option></select>
  템플릿 <select name="template">{% for r in rank %}<option value="{{ tpl }}{{ r.name }}">{{ loop.index }}위 {{ r.name }}</option>{% endfor %}</select>
  <button id="mk">교각 만들기</button></p>
</form>
<p class="muted">[교각 만들기]를 누를 때 교각 폴더가 만들어지고 올린 도면이 그 안으로 옮겨집니다. 6문항 답은 교각 정보(pier.json)에 저장됩니다.
'다름'이 있는데 진행하면 형식이 다른 도면을 같은 템플릿에 넣는 것이므로, 만든 뒤 모든 묶음을 특히 주의해서 확인하세요.</p>
<script>
(function () {
  var PROF = {{ profiles | tojson }}, QS = {{ questions | map(attribute=0) | list | tojson }}, LAB = {{ questions | map(attribute=1) | list | tojson }};
  var f = document.querySelector('form'), v = document.getElementById('verdict'), mk = document.getElementById('mk');
  function judge() {
    var t = f.template.value.replace('{{ tpl }}', ''), pr = PROF[t], bad = [];
    QS.forEach(function (q, i) { if (String(pr[q]) !== f['ans_' + q].value.trim()) bad.push(LAB[i]); });
    if (f.ans_rebar_shape.value === '아니오') bad.push('철근 형상 종류');
    if (f.ans_rebar_method.value === '아니오') bad.push('철근 생성 방식');
    var unk = (f.ans_rebar_shape.value === '미확인' ? 1 : 0) + (f.ans_rebar_method.value === '미확인' ? 1 : 0);
    if (bad.length) { v.className = 'fail'; v.textContent = '■ 같은 템플릿으로 만들 수 없음 — 다른 문항: ' + bad.join(', ') + '. 가장 가까운 템플릿에 생성기·검사기를 추가해야 합니다. 진행하면 형식 불일치 경고가 교각에 계속 표시됩니다.'; mk.textContent = '그래도 만들기'; }
    else { v.className = 'ok'; v.textContent = '● 이 템플릿으로 만들 수 있음' + (unk ? ' (철근 문항 ' + unk + '개는 미확인)' : ''); mk.textContent = '교각 만들기'; }
  }
  f.addEventListener('input', judge); f.addEventListener('change', judge); judge();
})();
</script>
{% endblock %}