<turbo-stream action="dialog" target="projects-configure-view-modal-component">
    <template>
      
<dialog-helper>
  <dialog style="min-height: 480px" id="op-project-list-configure-dialog" aria-modal="true" aria-labelledby="op-project-list-configure-dialog-title" aria-describedby="op-project-list-configure-dialog-description" data-view-component="true" class="Overlay Overlay-whenNarrow Overlay--size-large Overlay--motion-scaleFade Overlay--disableScroll">
    <div data-view-component="true" class="Overlay-header Overlay-header--large">
  <div class="Overlay-headerContentWrap">
    <div class="Overlay-titleWrap">
      <h1 class="Overlay-title " id="op-project-list-configure-dialog-title">
        보기 구성
      </h1>
        
    </div>
    <div class="Overlay-actionWrap">
      <button data-close-dialog-id="op-project-list-configure-dialog" aria-label="Close" aria-label="Close" type="button" data-view-component="true" class="close-button Overlay-closeButton"><svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-x">
    <path d="M3.72 3.72a.75.75 0 0 1 1.06 0L8 6.94l3.22-3.22a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L9.06 8l3.22 3.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L8 9.06l-3.22 3.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L6.94 8 3.72 4.78a.75.75 0 0 1 0-1.06Z"></path>
</svg></button>
    </div>
  </div>
  
</div>
      
  <div data-view-component="true" class="Overlay-body">
    <form id="op-project-list-configure-query-form" data-turbo-stream="false" action="/projects" accept-charset="UTF-8" method="get">
      <tab-container data-view-component="true">
  <div data-view-component="true" class="tabnav">
    
    <ul role="tablist" aria-label="label" data-view-component="true" class="tabnav-tabs">
        <li role="presentation" data-view-component="true" class="d-inline-flex">
  <button id="tab-selects--columns" type="button" role="tab" aria-controls="panel-tab-selects--columns" aria-selected="true" data-view-component="true" class="tabnav-tab">
    
      <span data-view-component="true">열</span>
    
</button></li>
        <li role="presentation" data-view-component="true" class="d-inline-flex">
  <button id="tab-selects--sorting" type="button" role="tab" aria-controls="panel-tab-selects--sorting" data-view-component="true" class="tabnav-tab">
    
      <span data-view-component="true">분류</span>
    
</button></li>
</ul>    
</div>    <div id="panel-tab-selects--columns" role="tabpanel" tabindex="0" aria-labelledby="tab-selects--columns" data-view-component="true">            <opce-draggable-autocompleter data-options="[{&quot;id&quot;:&quot;id&quot;,&quot;name&quot;:&quot;ID&quot;},{&quot;id&quot;:&quot;budget_planned&quot;,&quot;name&quot;:&quot;계획된 예산&quot;},{&quot;id&quot;:&quot;public&quot;,&quot;name&quot;:&quot;공용&quot;},{&quot;id&quot;:&quot;budget_available&quot;,&quot;name&quot;:&quot;사용 가능한 예산&quot;},{&quot;id&quot;:&quot;project_status&quot;,&quot;name&quot;:&quot;상태&quot;},{&quot;id&quot;:&quot;description&quot;,&quot;name&quot;:&quot;설명&quot;},{&quot;id&quot;:&quot;budget_spent&quot;,&quot;name&quot;:&quot;소비된 예산&quot;},{&quot;id&quot;:&quot;identifier&quot;,&quot;name&quot;:&quot;식별자&quot;},{&quot;id&quot;:&quot;updated_at&quot;,&quot;name&quot;:&quot;업데이트 날짜&quot;},{&quot;id&quot;:&quot;budget_spent_ratio&quot;,&quot;name&quot;:&quot;예산 소비율&quot;},{&quot;id&quot;:&quot;name&quot;,&quot;name&quot;:&quot;이름&quot;},{&quot;id&quot;:&quot;created_at&quot;,&quot;name&quot;:&quot;작성일&quot;},{&quot;id&quot;:&quot;favorited&quot;,&quot;name&quot;:&quot;즐겨찾기&quot;},{&quot;id&quot;:&quot;status_explanation&quot;,&quot;name&quot;:&quot;프로젝트 상태 설명&quot;}]" data-selected="[{&quot;id&quot;:&quot;name&quot;,&quot;name&quot;:&quot;이름&quot;},{&quot;id&quot;:&quot;project_status&quot;,&quot;name&quot;:&quot;상태&quot;},{&quot;id&quot;:&quot;public&quot;,&quot;name&quot;:&quot;공용&quot;}]" data-protected="[{&quot;id&quot;:&quot;name&quot;,&quot;name&quot;:&quot;이름&quot;}]" data-name="&quot;columns&quot;" data-id="&quot;columns-select&quot;" data-drag-area-name="&quot;columns-select_dragarea&quot;" data-form-control-id="&quot;columns-select_autocompleter&quot;" data-input-label="&quot;열 추가&quot;" data-input-placeholder="&quot;열 선택&quot;" data-drag-area-label="&quot;열 관리 및 재정렬&quot;" data-append-to-component="true" class="op-angular-component"></opce-draggable-autocompleter>
</div>
    <div id="panel-tab-selects--sorting" role="tabpanel" tabindex="0" hidden="hidden" aria-labelledby="tab-selects--sorting" data-view-component="true">            <h5 data-view-component="true">자동</h5>
<span data-view-component="true" class="text-small color-fg-subtle">하나 이상의 정렬 기준에 따라 프로젝트을(를) 정렬합니다. 이전 정렬은 손실됩니다.</span>
<div data-controller="sort-by-config">
  <input type="hidden" name="sortBy" id="sortBy" value="[[&quot;project_status&quot;,&quot;asc&quot;]]" data-sort-by-config-target="sortByField" autocomplete="off" />
    <div data-sort-by-config-target="inputRowContainer" data-view-component="true" class="d-flex flex-column">
      <div data-sort-by-config-target="inputRow" data-view-component="true" class="mt-3">        
  <div data-view-component="true" class="d-flex flex-row">
      <div data-view-component="true" class="flex-1">    <select name="sort_field" id="sort_field" form="none" class="FormControl-select FormControl-medium FormControl--fullWidth" data-action="change-&gt;sort-by-config#fieldChanged"><option value="">-</option><option value="lft">프로젝트 계층 구조</option>
<option value="id">ID</option>
<option value="public">공용</option>
<option selected="selected" value="project_status">상태</option>
<option value="identifier">식별자</option>
<option value="updated_at">업데이트 날짜</option>
<option value="name">이름</option>
<option value="created_at">작성일</option></select>
</div>
      <div data-view-component="true">    <segmented-control>
  <ul aria-label="Sort order" role="list" data-view-component="true" class="SegmentedControl--medium SegmentedControl SegmentedControl--iconOnly ml-3">
      <li class="SegmentedControl-item SegmentedControl-item--selected" role="listitem" data-targets="segmented-control.items">
  <button data-direction="asc" data-action="click:segmented-control#select click-&gt;sort-by-config#fieldChanged" data-action="click:segmented-control#select" id="icon-button-c1d4ca8a-1e30-4bc4-a2c6-8d311d8a3529" aria-current="true" aria-labelledby="tooltip-6c338a4e-8b87-419d-9d95-bf82b446de28" type="button" data-view-component="true" class="Button Button--iconOnly Button--invisible Button--medium">  <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-sort-asc Button-visual">
    <path d="m12.927 2.573 3 3A.25.25 0 0 1 15.75 6H13.5v6.75a.75.75 0 0 1-1.5 0V6H9.75a.25.25 0 0 1-.177-.427l3-3a.25.25 0 0 1 .354 0ZM0 12.25a.75.75 0 0 1 .75-.75h7.5a.75.75 0 0 1 0 1.5H.75a.75.75 0 0 1-.75-.75Zm0-4a.75.75 0 0 1 .75-.75h4.5a.75.75 0 0 1 0 1.5H.75A.75.75 0 0 1 0 8.25Zm0-4a.75.75 0 0 1 .75-.75h2.5a.75.75 0 0 1 0 1.5H.75A.75.75 0 0 1 0 4.25Z"></path>
</svg>
</button><tool-tip id="tooltip-6c338a4e-8b87-419d-9d95-bf82b446de28" for="icon-button-c1d4ca8a-1e30-4bc4-a2c6-8d311d8a3529" popover="manual" data-direction="s" data-type="label" data-view-component="true" class="sr-only position-absolute">오름차순 정렬</tool-tip>

</li>

      <li class="SegmentedControl-item" role="listitem" data-targets="segmented-control.items">
  <button data-direction="desc" data-action="click:segmented-control#select click-&gt;sort-by-config#fieldChanged" data-action="click:segmented-control#select" id="icon-button-26bbf96e-87e5-4853-b970-290ea4cd6bb1" aria-current="false" aria-labelledby="tooltip-0f8b0693-359e-4694-80c8-eb551c824740" type="button" data-view-component="true" class="Button Button--iconOnly Button--invisible Button--medium">  <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-sort-desc Button-visual">
    <path d="M0 4.25a.75.75 0 0 1 .75-.75h7.5a.75.75 0 0 1 0 1.5H.75A.75.75 0 0 1 0 4.25Zm0 4a.75.75 0 0 1 .75-.75h4.5a.75.75 0 0 1 0 1.5H.75A.75.75 0 0 1 0 8.25Zm0 4a.75.75 0 0 1 .75-.75h2.5a.75.75 0 0 1 0 1.5H.75a.75.75 0 0 1-.75-.75ZM13.5 10h2.25a.25.25 0 0 1 .177.427l-3 3a.25.25 0 0 1-.354 0l-3-3A.25.25 0 0 1 9.75 10H12V3.75a.75.75 0 0 1 1.5 0V10Z"></path>
</svg>
</button><tool-tip id="tooltip-0f8b0693-359e-4694-80c8-eb551c824740" for="icon-button-26bbf96e-87e5-4853-b970-290ea4cd6bb1" popover="manual" data-direction="s" data-type="label" data-view-component="true" class="sr-only position-absolute">내림차순 정렬</tool-tip>

</li>

</ul></segmented-control>
</div>
</div>

</div>
      <div data-sort-by-config-target="inputRow" data-view-component="true" class="mt-3">        
  <div data-view-component="true" class="d-flex flex-row">
      <div data-view-component="true" class="flex-1">    <select name="sort_field" id="sort_field" form="none" class="FormControl-select FormControl-medium FormControl--fullWidth" data-action="change-&gt;sort-by-config#fieldChanged"><option value="">-</option><option value="lft">프로젝트 계층 구조</option>
<option value="id">ID</option>
<option value="public">공용</option>
<option value="project_status">상태</option>
<option value="identifier">식별자</option>
<option value="updated_at">업데이트 날짜</option>
<option value="name">이름</option>
<option value="created_at">작성일</option></select>
</div>
      <div data-view-component="true">    <segmented-control>
  <ul aria-label="Sort order" role="list" data-view-component="true" class="SegmentedControl--medium SegmentedControl SegmentedControl--iconOnly ml-3">
      <li class="SegmentedControl-item" role="listitem" data-targets="segmented-control.items">
  <button data-direction="asc" data-action="click:segmented-control#select click-&gt;sort-by-config#fieldChanged" data-action="click:segmented-control#select" id="icon-button-0a6f213a-fe40-4e7f-8d09-b43ee9acc776" aria-current="false" aria-labelledby="tooltip-3836018d-e2d8-4699-aec3-072b792d1790" type="button" data-view-component="true" class="Button Button--iconOnly Button--invisible Button--medium">  <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-sort-asc Button-visual">
    <path d="m12.927 2.573 3 3A.25.25 0 0 1 15.75 6H13.5v6.75a.75.75 0 0 1-1.5 0V6H9.75a.25.25 0 0 1-.177-.427l3-3a.25.25 0 0 1 .354 0ZM0 12.25a.75.75 0 0 1 .75-.75h7.5a.75.75 0 0 1 0 1.5H.75a.75.75 0 0 1-.75-.75Zm0-4a.75.75 0 0 1 .75-.75h4.5a.75.75 0 0 1 0 1.5H.75A.75.75 0 0 1 0 8.25Zm0-4a.75.75 0 0 1 .75-.75h2.5a.75.75 0 0 1 0 1.5H.75A.75.75 0 0 1 0 4.25Z"></path>
</svg>
</button><tool-tip id="tooltip-3836018d-e2d8-4699-aec3-072b792d1790" for="icon-button-0a6f213a-fe40-4e7f-8d09-b43ee9acc776" popover="manual" data-direction="s" data-type="label" data-view-component="true" class="sr-only position-absolute">오름차순 정렬</tool-tip>

</li>

      <li class="SegmentedControl-item" role="listitem" data-targets="segmented-control.items">
  <button data-direction="desc" data-action="click:segmented-control#select click-&gt;sort-by-config#fieldChanged" data-action="click:segmented-control#select" id="icon-button-bf81ec07-13bf-4436-8da1-3ebe43d0486c" aria-current="false" aria-labelledby="tooltip-c42e2d3d-f009-4fdf-b0ce-e3e99b8f64f7" type="button" data-view-component="true" class="Button Button--iconOnly Button--invisible Button--medium">  <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-sort-desc Button-visual">
    <path d="M0 4.25a.75.75 0 0 1 .75-.75h7.5a.75.75 0 0 1 0 1.5H.75A.75.75 0 0 1 0 4.25Zm0 4a.75.75 0 0 1 .75-.75h4.5a.75.75 0 0 1 0 1.5H.75A.75.75 0 0 1 0 8.25Zm0 4a.75.75 0 0 1 .75-.75h2.5a.75.75 0 0 1 0 1.5H.75a.75.75 0 0 1-.75-.75ZM13.5 10h2.25a.25.25 0 0 1 .177.427l-3 3a.25.25 0 0 1-.354 0l-3-3A.25.25 0 0 1 9.75 10H12V3.75a.75.75 0 0 1 1.5 0V10Z"></path>
</svg>
</button><tool-tip id="tooltip-c42e2d3d-f009-4fdf-b0ce-e3e99b8f64f7" for="icon-button-bf81ec07-13bf-4436-8da1-3ebe43d0486c" popover="manual" data-direction="s" data-type="label" data-view-component="true" class="sr-only position-absolute">내림차순 정렬</tool-tip>

</li>

</ul></segmented-control>
</div>
</div>

</div>
      <div data-sort-by-config-target="inputRow" data-view-component="true" class="mt-3">        
  <div data-view-component="true" class="d-flex flex-row">
      <div data-view-component="true" class="flex-1">    <select name="sort_field" id="sort_field" form="none" class="FormControl-select FormControl-medium FormControl--fullWidth" data-action="change-&gt;sort-by-config#fieldChanged"><option value="">-</option><option value="lft">프로젝트 계층 구조</option>
<option value="id">ID</option>
<option value="public">공용</option>
<option value="project_status">상태</option>
<option value="identifier">식별자</option>
<option value="updated_at">업데이트 날짜</option>
<option value="name">이름</option>
<option value="created_at">작성일</option></select>
</div>
      <div data-view-component="true">    <segmented-control>
  <ul aria-label="Sort order" role="list" data-view-component="true" class="SegmentedControl--medium SegmentedControl SegmentedControl--iconOnly ml-3">
      <li class="SegmentedControl-item" role="listitem" data-targets="segmented-control.items">
  <button data-direction="asc" data-action="click:segmented-control#select click-&gt;sort-by-config#fieldChanged" data-action="click:segmented-control#select" id="icon-button-efd96fbf-d7a8-4467-8a8b-537e0d4bcb01" aria-current="false" aria-labelledby="tooltip-79a400e9-7eb0-438d-9e22-98d12e26f006" type="button" data-view-component="true" class="Button Button--iconOnly Button--invisible Button--medium">  <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-sort-asc Button-visual">
    <path d="m12.927 2.573 3 3A.25.25 0 0 1 15.75 6H13.5v6.75a.75.75 0 0 1-1.5 0V6H9.75a.25.25 0 0 1-.177-.427l3-3a.25.25 0 0 1 .354 0ZM0 12.25a.75.75 0 0 1 .75-.75h7.5a.75.75 0 0 1 0 1.5H.75a.75.75 0 0 1-.75-.75Zm0-4a.75.75 0 0 1 .75-.75h4.5a.75.75 0 0 1 0 1.5H.75A.75.75 0 0 1 0 8.25Zm0-4a.75.75 0 0 1 .75-.75h2.5a.75.75 0 0 1 0 1.5H.75A.75.75 0 0 1 0 4.25Z"></path>
</svg>
</button><tool-tip id="tooltip-79a400e9-7eb0-438d-9e22-98d12e26f006" for="icon-button-efd96fbf-d7a8-4467-8a8b-537e0d4bcb01" popover="manual" data-direction="s" data-type="label" data-view-component="true" class="sr-only position-absolute">오름차순 정렬</tool-tip>

</li>

      <li class="SegmentedControl-item" role="listitem" data-targets="segmented-control.items">
  <button data-direction="desc" data-action="click:segmented-control#select click-&gt;sort-by-config#fieldChanged" data-action="click:segmented-control#select" id="icon-button-4b24c9f0-8493-495a-bcbd-fb2b34884d92" aria-current="false" aria-labelledby="tooltip-1e688bd2-1fe2-400e-8ece-69de8e7112ff" type="button" data-view-component="true" class="Button Button--iconOnly Button--invisible Button--medium">  <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-sort-desc Button-visual">
    <path d="M0 4.25a.75.75 0 0 1 .75-.75h7.5a.75.75 0 0 1 0 1.5H.75A.75.75 0 0 1 0 4.25Zm0 4a.75.75 0 0 1 .75-.75h4.5a.75.75 0 0 1 0 1.5H.75A.75.75 0 0 1 0 8.25Zm0 4a.75.75 0 0 1 .75-.75h2.5a.75.75 0 0 1 0 1.5H.75a.75.75 0 0 1-.75-.75ZM13.5 10h2.25a.25.25 0 0 1 .177.427l-3 3a.25.25 0 0 1-.354 0l-3-3A.25.25 0 0 1 9.75 10H12V3.75a.75.75 0 0 1 1.5 0V10Z"></path>
</svg>
</button><tool-tip id="tooltip-1e688bd2-1fe2-400e-8ece-69de8e7112ff" for="icon-button-4b24c9f0-8493-495a-bcbd-fb2b34884d92" popover="manual" data-direction="s" data-type="label" data-view-component="true" class="sr-only position-absolute">내림차순 정렬</tool-tip>

</li>

</ul></segmented-control>
</div>
</div>

</div>
</div>

</div>

</div>
</tab-container></form></div>  <div data-view-component="true" class="Overlay-footer Overlay-footer--alignEnd">
    <button data-close-dialog-id="op-project-list-configure-dialog" type="button" data-view-component="true" class="Button--secondary Button--medium Button">  <span class="Button-content">
    <span class="Button-label">취소</span>
  </span>
</button>

    <button data-test-selector="op-project-list-configure-dialog-submit" form="op-project-list-configure-query-form" type="submit" data-view-component="true" class="Button--primary Button--medium Button">  <span class="Button-content">
    <span class="Button-label">적용</span>
  </span>
</button>

</div>
</dialog></dialog-helper>

    </template>
</turbo-stream>