const root = $('#editor-root')

var data = [
    {
        "type": "question",
        "q_no": 3,
        "text": "The ball is gathered by the defensive division and a player throws it forward, hitting the korf in the other division.",
        "options": [
          "Play on",
          "Opposite team restart under their defensive post",
          "Opposite team restart where the ball was thrown from"
        ],
        "correct": 0,
        "q_type": "Multiple Choice",
        "tags": [
          "scoring from the defence zone"
        ]
      },
      {
        "type": "question",
        "q_no": 4,
        "text": "At the end of the game, after the final whistle, a coach loudly confronts the referee. What can the referee do?",
        "options": [
          "Ignore the coach as the match has ended",
          "Ignore the coach or inform the coach they will be reported",
          "Ignore the coach, inform the coach they will be reported and/or show the coach a card"
        ],
        "correct": 2,
        "q_type": "List",
        "tags": [
          "discipline"
        ]
      },
]

for (var i = 0; i < data.length; i++) {
    if (data[i]['type'] == 'question') {
        var obj = `
            <div class="accordion-item" id="i${i}">
                <h2 class="accordion-header" id="h${i}">
                    <div class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#c${i}" aria-expanded="true" aria-controls="c${i}">
                        <div class="float-start">Question ${i+1}</div>
                        <a href="javascript:void(0)" class="btn btn-success panel-control" data-id="${i}" data-action="remove">X</a>
                    </div>
                </h2>
                <div id="c${i}" class="accordion-collapse collapse" aria-labelledby="h${i}" data-bs-parent="#editor-root">
                    <div class="accordion-body">
                        <div class="question-text">
                            ${data[i]['text']}
                        </div>
                        <ul>
                            <li>
                                ${data[i]['options'].join("</li><li>")}
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        `
        root.append(obj)
    }
}

$('.panel-control').click(function(event) {
    console.log($(this).data('id'))
    var id = $(this).data('id')
    $(`#i${id}`).remove()
})