colonizers/colonizers

<div class="modal fade" id="buildModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title">Build/upgrade</h4>
      </div>
      <div class="modal-body">

        <div class="media">
          <a class="media-left" href="#">
            <img class="media-object" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2NCIgaGVpZ2h0PSI2NCI+PHJlY3Qgd2lkdGg9IjY0IiBoZWlnaHQ9IjY0IiBmaWxsPSIjZWVlIi8+PHRleHQgdGV4dC1hbmNob3I9Im1pZGRsZSIgeD0iMzIiIHk9IjMyIiBzdHlsZT0iZmlsbDojYWFhO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1zaXplOjEycHg7Zm9udC1mYW1pbHk6QXJpYWwsSGVsdmV0aWNhLHNhbnMtc2VyaWY7ZG9taW5hbnQtYmFzZWxpbmU6Y2VudHJhbCI+NjR4NjQ8L3RleHQ+PC9zdmc+" alt="...">
          </a>
          <div class="media-body">
            <h4 class="media-heading">
              Road
              <span class="badge lumber" title="Lumber">1</span>
              <span class="badge brick" title="Brick">1</span>
            </h4>
          </div>
          <div class="media-right">
            <button type="button" class="btn btn-default" data-bind="enable: canBuildRoad, click: buildRoad">Build</button>
            <br>
            <em><span data-bind="text: allowanceRoads"></span> available</em>
          </div>
        </div>

        <div class="media">
          <a class="media-left" href="#">
            <img class="media-object" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2NCIgaGVpZ2h0PSI2NCI+PHJlY3Qgd2lkdGg9IjY0IiBoZWlnaHQ9IjY0IiBmaWxsPSIjZWVlIi8+PHRleHQgdGV4dC1hbmNob3I9Im1pZGRsZSIgeD0iMzIiIHk9IjMyIiBzdHlsZT0iZmlsbDojYWFhO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1zaXplOjEycHg7Zm9udC1mYW1pbHk6QXJpYWwsSGVsdmV0aWNhLHNhbnMtc2VyaWY7ZG9taW5hbnQtYmFzZWxpbmU6Y2VudHJhbCI+NjR4NjQ8L3RleHQ+PC9zdmc+" alt="...">
          </a>
          <div class="media-body">
            <h4 class="media-heading">
              Settlement
              <span class="badge lumber" title="Lumber">1</span>
              <span class="badge brick" title="Brick">1</span>
              <span class="badge wool" title="Wool">1</span>
              <span class="badge grain" title="Grain">1</span>
            </h4>
          </div>
          <div class="media-right">
            <button type="button" class="btn btn-default" data-bind="enable: canBuildSettlement, click: buildSettlement">Build</button>
            <br>
            <em><span data-bind="text: allowanceSettlements"></span> available</em>
          </div>
        </div>

        <div class="media">
          <a class="media-left" href="#">
            <img class="media-object" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2NCIgaGVpZ2h0PSI2NCI+PHJlY3Qgd2lkdGg9IjY0IiBoZWlnaHQ9IjY0IiBmaWxsPSIjZWVlIi8+PHRleHQgdGV4dC1hbmNob3I9Im1pZGRsZSIgeD0iMzIiIHk9IjMyIiBzdHlsZT0iZmlsbDojYWFhO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1zaXplOjEycHg7Zm9udC1mYW1pbHk6QXJpYWwsSGVsdmV0aWNhLHNhbnMtc2VyaWY7ZG9taW5hbnQtYmFzZWxpbmU6Y2VudHJhbCI+NjR4NjQ8L3RleHQ+PC9zdmc+" alt="...">
          </a>
          <div class="media-body">
            <h4 class="media-heading">
              City
              <span class="badge grain" title="Grain">2</span>
              <span class="badge ore" title="Ore">3</span>
            </h4>
          </div>
          <div class="media-right">
            <button type="button" class="btn btn-default" data-bind="enable: canBuildCity, click: buildCity">Build</button>
            <br>
            <em><span data-bind="text: allowanceCities"></span> available</em>
          </div>
        </div>


      </div>
    </div>
  </div>
</div>