Как правильно вывести из JSON в HTML?

Есть визуальная часть кнопок, которую нужно отобразить из готового JSON кода. Как это сделать чтобы отображало правильно?

Вот JSON

{"one_time":false,"buttons":[[{"action":{"type":"text","payload":"{\"button\": \"2\"}","label":"Текст кнопки"},"color":"primary"}],[{"action":{"type":"text","payload":"{\"button\": \"2\"}","label":"Кнопка"},"color":"primary"},{"action":{"type":"text","payload":"{\"button\": \"4\"}","label":"Кнопка"},"color":"primary"},{"action":{"type":"text","payload":"{\"button\": \"1\"}","label":"Кнопка"},"color":"primary"}],[{"action":{"type":"text","payload":"{\"button\": \"1\"}","label":"Кнопка"},"color":"primary"}]]}

$json_keyboard = json_decode($coled[0]['json_keyboard']);

  $i = 0;
  foreach( $json_keyboard->buttons as $key => $keybord ) {
	$i++;

	if( count($keybord) == 1 ) {

	$button_name .= '<div class="row">
		<div class="col-sm-11">
		 <div data-row-id="'.$i.'" class="keyboard-row keyboard-buttons">
		   <div class="keyboard-col">
			<label>
			  <span class="close fa fa-times"></span>
			   <input class="btn keyboard-button color-primary" name="keyboard['.$i.']['.$key.'][text]" type="text" autocomplete="off" value="'.$keybord[0]->action->label.'">
			   <input class="btn" name="keyboard['.$i.']['.$key.'][color]" type="hidden" value="primary"></label>
		   </div></div></div><div class="col-sm-1 add-col">
			<button class="btn btn-block btn-primary pull-right" data-row-id="'.$i.'">
			 <span class="fa fa-plus"></span>
			</button>
		  </div>
		 </div>';

	} else {
		
		$keyboard_col .= '<div class="keyboard-col">
		<label>
	  <span class="close fa fa-times"></span>
	   <input class="btn keyboard-button color-primary" name="keyboard['.$key.']['.$i.'][text]" type="text" autocomplete="off" value="'.$keybord[0]->action->label.'">
	   <input class="btn" name="keyboard['.$key.']['.$i.'][color]" type="hidden" value="primary"></label>
	  </div>';

	$button_name .= '<div class="row">
		<div class="col-sm-11">
		 <div data-row-id="'.$i.'" class="keyboard-row keyboard-buttons">
		   '.$keyboard_col.'
		 </div>
		</div>
		   <div class="col-sm-1 add-col">
			<button class="btn btn-block btn-primary pull-right" data-row-id="'.$i.'">
			 <span class="fa fa-plus"></span>
			</button>
		  </div>
		 </div>';

	  }
			
    }

Вот так должно выглядеть визуально. Если кнопка одна в один столбец, то должно в row > keyboard-row keyboard-buttons вывести один $keyboard_col , а если, например, 3 кнопки, то должно вывести 3 блока $keyboard_col в блок row > keyboard-row keyboard-buttons.